Почему inputmask не работает?

Question

artuh_a @artuh_a

JavaScript

Почему inputmask не работает?

Добрый день!

На сайте в форме заказать звонок добавил маску для поля телефон:

<head>
     <script type="text/javascript" src="/themes/default-bootstrap/js/jquery-1.11.0.min.js"></script>
     <script type="text/javascript" src="/themes/default-bootstrap/js/jquery.maskedinput.js"></script>
     <script type="text/javascript">
		$(function (){
			$('.dsclmbtn').live('click', function(){			
				$('#field-id135987').mask('+7(999) 999-9999');
			});
		});
	</script>
</head>

В итоге маска срабатывает только со 2 раза открытия формы. Почему так может быть?

Вопрос задан более трёх лет назад
1718 просмотров

3 комментария

Подписаться 1 Средний 3 комментария

Dima Polos @dimovich85 Куратор тега JavaScript

Почему решили именно live, а не on использовать? В доках описывается, что live устаревает.
jquery.page2page.ru/index.php5/%D0%A3%D1%81%D1%82%...

В разделе особенности метода есть инфа, что live использует всплытие событий, может добавить сюда контекст, чтобы событие быстрее доходило до обработчика?

Написано более трёх лет назад
artuh_a @artuh_a Автор вопроса

Dima Polos, поменял .live на .on - все тоже самое.

может добавить сюда контекст, чтобы событие быстрее доходило до обработчика?
поясните, пожалуйста

Написано более трёх лет назад
Dima Polos @dimovich85 Куратор тега JavaScript

Достоинством метода live(), является то, что установленные обработчики будут вызываться как на текущих элементах страницы, так и на будующих. Это становится возможным благодаря особому устройству метода live(). Вместо того, чтобы привязывать обработчик событий к самим элементам, live() устанавливает его в начало дерева элементов DOM, либо элементу, указанному в роли контекста. Допустим, мы обрабатываем нажатие на div-элемент. Когда случается событие, происходит следующее:

1.нажатый div-элемент генерирует событие click.
2.если на этом элементе установлены обработчики, то они будут выполнены, после чего, событие будет передано вверх по иерархии дерева DOM.
3.пройдя таким образом несколько уровней иерархии, мы дойдем до элемента, которому был присвоен специальный обработчик события, методом live().
4.этот обработчик проверит, соответствует ли первоначально нажатый элемент селектору, применительно к которому вызывался метод live().
5.если элемент подходит, то будет вызван соответствующий обработчик.
Чтобы событию не приходилось подниматься до самого начала дерева DOM, можно указать контекст и тогда обработчик будет установлен в его начало, что сократит общее время обработки события:

// если в роли контекста можно указать один элемент, то можно сделать это так:
$('td', $('table')[0]).live('hover', function(){}) // в качестве контекста будет использована первая таблица на странице

// или так, в случае, если речь идет о нескольких элементах в роли контекста
$("table").each(function(){
$("td", this).live("hover", function(){});
});

Это копипаст с той ссылки, что писал выше. Сам я live никогда не пользовал, обычно .on() хватает.
Дублирую ссылку: jquery.page2page.ru/index.php5/%D0%A3%D1%81%D1%82%...
Надеюсь разберетесь, самому интересно стало.

Написано более трёх лет назад

Решения вопроса 1

4 комментария

artuh_a @artuh_a Автор вопроса

да, форма создается после клика на кнопку, для этого я и пишу .live (исправил на .on) по логике тогда маска должна вешаться после создания инпута, или как нужно по-другому делать?

Написано более трёх лет назад
coderisimo @coderisimo Куратор тега JavaScript
Live и on как мне кажется здесь роли не играют. Лучше всего сделать так, чтобы ваш инпут был на странице с самого начала (невидимый). И повесить на него единожды маску.Не по клику, а просто сразу.
Либо вы можете использовать что-то типа :

$('.dsclmbtn').on('click', function(){ // сначала вам надо удалить маску , которую вы навесили при предыдущем клике! setTimeout( function() {$('#field-id135987').unmask().mask('+7(999) 999-9999');} , 1000); });

Это работает, но не идея , как мне кажется слишком правильная. Об этом написано в комментарии. Если вы цепляете маску при клике на кнопке, то это происходит КАЖДЫЙ раз, когда вы открываете данное окошко с инпутом. Соответственно, нужно удалять старую маску - unmask().
Написано более трёх лет назад
artuh_a @artuh_a Автор вопроса

coderisimo, Большое спасибо!!!

Написано более трёх лет назад
coderisimo @coderisimo Куратор тега JavaScript

artuh_a, удачи )

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

Простой
Как вывести фотографии из папки или из контейнера последовательно с отработкой на каждой анимации?
- 1 подписчик
- 18 часов назад
- 31 просмотр
1

ответ
JavaScript

Простой
Как проверить три последние цифры числа и по условию изменить их?
- 1 подписчик
- 21 час назад
- 132 просмотра
2

ответа
JavaScript

Простой
Как правильнее организовать код калькулятора?
- 1 подписчик
- вчера
- 116 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Как поменять тип проекции карты в Leaflet?
- 3 подписчика
- вчера
- 722 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- 02 мая
- 67 просмотров
0

ответов
JavaScript

Простой
Почему не срабатывает prototype reverse на строке?
- 1 подписчик
- 01 мая
- 58 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- 01 мая
- 180 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как сделать ajax фильтрацию по категориям в WP?
- 1 подписчик
- 01 мая
- 57 просмотров
0

ответов
JavaScript

Средний
Как сделать, чтобы встроенный обработчик события убрал сам себя?
- 3 подписчика
- 01 мая
- 706 просмотров
4

ответа
JavaScript

Простой
Как реализовать карирование так, чтобы оно не было замкнуто на одну переменную?
- 1 подписчик
- 01 мая
- 95 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Перенести C# код программы на winapi

04 мая 2024, в 09:40

1000 руб./за проект

Десктопное приложение для алготрейдинга в сфере криптовалют

04 мая 2024, в 09:38

90000 руб./за проект

Написать SEO текст для встраивания в сайт

04 мая 2024, в 09:19

500 руб./за проект

Почему решили именно live, а не on использовать? В доках описывается, что live устаревает.
jquery.page2page.ru/index.php5/%D0%A3%D1%81%D1%82%...

В разделе особенности метода есть инфа, что live использует всплытие событий, может добавить сюда контекст, чтобы событие быстрее доходило до обработчика?
Dima Polos, поменял .live на .on - все тоже самое.

может добавить сюда контекст, чтобы событие быстрее доходило до обработчика?
поясните, пожалуйста

Answer 1 · 2018-01-02 23:19:39

Если открыть страницу и попробовать сделать так : $('#field-id135987').length , вы получите 0
Т.е первый раз вы пытаетесь повесить маску на элемент, КОТОРОГО НЕТ. Судя по всему инпут создается после нажатия на кнопку "Заказать звонок". Никто не гарантирует вам, что когда вы нажмете кнопку сначала создастся инпут, а уж потом к нему прицепится маска. Это объясняет повторное срабатывание. Надеюсь, ошибка ясна. Удачи

Answer 2 · 2018-01-02 23:13:06

Shinso @Shinso

Попробуй разместить его перед </body>

Ответ написан более трёх лет назад

Комментировать

Почему inputmask не работает?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт