Jquery.inputmask.js для всплывающего окна?

Question

[jelezo]

Приветствую. На сайте есть всплывающее окно и подключён jquery.inputmask.js
Для обычных инпутов маска работает корректно, а вот с всплывающим окном проблема.

Всплывающее окно открывается при клике на такую кнопку:

<div style="display: block;" id="zcwMiniButton">
    <div id="zcwMiniButtonMain">
    </div>
</div>

Код всплывающего окна до нажатия на кнопку (т.е. она скрыта и инпута до нажатия на кнопку во всплывающем окне нет):

<div class="zcwPopup">
    <div class="zcwPopup-close">X</div>
    <div class="zcwPopup-content">
        <div class="zcwPopup-form"></div>
    </div>
</div>

Код всплывающего окна после нажатия на кнопку (появляется форма с инпутом):

<div style="display: block;" class="zcwPopup">
    <div class="zcwPopup-close">X</div>
    <div class="zcwPopup-content">
        <div class="zcwPopup-form">
            <form action="" method="get">
                <input  name="n" value="" placeholder="83830000000" type="text">
                <input value="Жду звонка!" type="submit">
            </form>
        </div>
    </div>
</div>

Форма генерируется внешним скриптом, который изменить нельзя.

Пробовал прописать маску так:
$('input[name=n]').mask("[phone]");
Но не работает.

В js не силён, но как понимаю, маска проставляется при первоначальной загрузки страницы. А так как форма появляется только после нажатия на кнопку, то поэтому к полю маска и не применяется.

Если это так, тогда вопрос: как применить маску после нажатия на кнопку и появления всплывающего окна?

Comments

[sunrails]

Наверняка у скрипта вашей формы есть события типа open, close и т.д. Что за скрипт формы?

[jelezo]

sunrails: скрипт колбэка от zadarma.com
https://ss.zadarma.com/callbackWidget/js/main.min....

Answer 1

[Николай]

Если скрипт формы никак не информирует о создании формы - можно попробовать посмотреть в сторону MutationObserver.
Ну или в таймауте проверять, не появились ли нужные элементы в DOM.

Answer 2

[mr_dev1l]

$("#zcwMiniButton").on('click', function(){
  $('input[name=n]').mask("[phone]");
});

Comments

[jelezo]

Не работает, к сожалению.

[mr_dev1l]

jelezo: как вариант можно сразу сделать маску, а форме задать position:absolute и left:-9999px. Потом по нажатию на кнопку позиционировать где вам нужно