Как задать маску для динамически созданного элемента формы?

Question

[mydarck]

Для добавления маски к элементу формы использую jQuery Masked Input.
Как известно она вызывается при помощи следующего обращения:
$('.phone').mask("[phone]");, не могу разобраться как добавить маску в динамически созданный элемент?

Comments

[Евгений Вольф]

$('.phone').mask("[phone]"); - вызвать этот код, после того как элемент был динамически добавлен?

[mydarck]

Евгений Вольф: С одной стороны вы правы, но на странице есть форма, которая не добавлена динамически и к ней применим данный код тоже. Не хотелось бы его дублировать, хотя это и можно сделать.

[mydarck]

Евгений Вольф: Может есть еще какой-нибудь очевидный ответ.

[Евгений Вольф]

mydarck: по логике вещей, маска должна перезаписываться, а не дублироваться. Но, если она всё-таки создаёт какой-то дубликат, можно отследить по какому-то признаку (класс, атрибут, ещё что-то) и добавить в селектор типа :not(признак_присутствия_маски), либо, как рекомендуют ниже - добавлять к вновь добавленному полю "персонально" по this или другому селектору, например по :last...

[mydarck]

Евгений Вольф: Принцип работы маски следующий: скрипт пробегает сформированный DOM находит все элементы с классом 'phone' и добавляет им в скрытое значение атрибута value выбранную маску. В момент клика по определенному полю, именно у этого поля появляется маска. Это если про маску. Как в таком случае маска должна перезаписываться я не знаю, простите, но она не дублируется. Точнее не дублируется код ее вызова, а именно: $('.phone').mask("[phone]");. Затем по клику на кнопку "Заказать" открывается форма содержимое которой подгружается при помощи ajax. В этот момент скрипт вызова маски уже пробежал по всем полям и закончил свою работу. А у нас появился новое поле с классом 'phone' в форме которая была подгружена позже ajax'ом. Для того, чтобы добавить этому полю маску, можно добавить еще один вызов маски, но после того, как форма с полем будет динамически добавлена. Как вы предложили в первый раз. Но это спровоцирует дубль вызова маски, один из которой будет в контексте обычной страницы, а другой в контексте подгруженной формы.

[Евгений Вольф]

Но это спровоцирует дубль вызова маски, один из которой будет в контексте обычной страницы, а другой в контексте подгруженной формы.

вопрос в том, к чему именно это дубль негативному приведёт?

Ну, и второй вариант, если дубль по каким-то причинам не устраивает - я подробно описал выше, нужно либо определять поля с классом .phone, у которых этой маски ещё нет и изменить соотв. образом селектор, либо, добавлять маску непосредственно на поля уже загруженной формы, после того как она появилась на странице. Тогда дублей наложения маски не будет.

Answer 1

[DTX]

Если this - это динамически созданный элемент, то
$(this).mask("[phone]");

Comments

[mydarck]

А если динамически созданный элемент: <input class="phone">, то?
Я пробывал что-то вроде:

$('body').on('click', '.phone', function(){
  $(this).mask("[phone]");
});

. Возможно Вы тоже что-то типа этого имели ввиду. Но при данном подходе маска на желаемом поле появляется только после второго нажатия.

[DTX]

mydarck: Покажите, как он создаётся динамически.

[mydarck]

DTX: Для этого я использую magnific popup -> Ajax popup. Действуя по документации:

<a href="ссылка на документ содержащий фору с полем phone" class="ajax-popup-link">Show inline popup</a>

$('.ajax-popup-link').magnificPopup({
  type: 'ajax'
});

плюс-минус несколько строк настроек.

[DTX]

mydarck: Если хотите по-хорошему, то до вызова magnificPopup() надо запомнить существующие input'ы, а после вызова для новых вызвать $(input).mask("[phone]");

[mydarck]

DTX: Такая идея имеет место быть, но честно говоря пока не имею представления о методе ее решения. Буду думать, пробовать.

[DTX]

mydarck: codepen.io/anon/pen/vyRorW