Как вызвать калькулятор отдельно от модального окна?

Question

[OculusDaemon]

Нужна помощь с инициализацией модального окна.
Есть сайт, на котором много модальных окон, чтобы не делать каждое окно, я сделал одно окно в которое, в зависимости от вызова, подставляется определенный контент.
Проблема вот в чем. В модальных окнах есть калькулятор, но после открытия модального окна он не работает. Как я понимаю, не работает по тому, что окно создается по клику, а до этого его еще не существует и калькулятор его не видит.
Все работает только тогда, если калькулятор вызвать вместе с модальным окном.
Вопрос: Как мне калькулятор вызвать отдельно от окна, вне функции клика.
P.S. JavaScript начал изучать недавно.
Пример: https://codepen.io/OculusDaemon/pen/aqjoxR?editors=1010
Скрин калькулятор

Comments

[Arman]

formInit нельзя менять? там во всю jQuery и как вариант можно было привязать событий не на конкретные элементы, а на их родителей. $.on

[OculusDaemon]

Arik, Как я понимаю это всплытие? Не могу понять как его использовать в данной ситуации.
P.S. Калькулятор писал не я.

[Arman]

OculusDaemon, на девятой строке скрина вы переносите форму в модальное окно, может ли быть проблемой что в DOM два блока формы с одним id и калькулятор работает с первым? если попробовать заменить на класс? вроде первый аргумент используется как префикс только. и что если в модальном окне сразу все записи сделать, просто блоки скрыть? а потом по клику показывать нужный и скрывать остальные?

[OculusDaemon]

Arik, Нет, по id не конфликтует, пробовал заменить на класс, ничего не изменилось. Изначально то окно лежит в блоке у которого display: none, а по клику уже передается содержимое скрытого блока.

[Kovalsky]

OculusDaemon, нет, это не bubbling, это делегирование.

Answer 1

[twobomb]

Я чето не понял, он что просто сразу должен вызываться без этого окна вот так?

Comments

[OculusDaemon]

Нет, он должен вызывать вне вызова окна.
Я так понимаю здесь нужно использовать всплытие, но не понимаю как.

Answer 2

[Сергей Сергей]

Весь код пропитан innerHTML. Проблема действительно в том, что formInit() применяется для вновь создаваемого блока через innerHTML. Пара вариантов имеется.

Для работы событий через всплытие нужно привязывать обработчики на popup-окно, например:

$( '#popup' ).on( 'click', '.plus', function() {
// здесь я не помню, куда будет указывать this
} );

И для привязки данных с разных полей нужно их выбирать через контекст popup-окна.
https://codepen.io/anon/pen/jZpVXB?editors=1010
Тут пересчёт суммы придется вызывать при открытии окна, для этого нужно перекроить код ещё немного.

По-другому если, то нужно перемещать саму форму из скрытого блока, функцией append(). Но тогда функция инициализации для форм должна будет предварительно разделить кнопочки и поля ввода-вывода по группам, чтобы "плюс"-кнопка одной формы не наращивала значение всех сумм в формах. Тут можно применить цикличное применение некой единичной инициализации одной формы или в обработчиках событий определять "родительскую" форму кнопок и полей.

Comments

[OculusDaemon]

Здесь получается, что калькулятор вызывается на само модальное окно, а не на контент переданный в него. Не совсем понял про append()

[Сергей Сергей]

OculusDaemon,
Да, события происходят в модальном окне, в которое вставляется текст формы. Обработчики навешиваются на окно с уточнением конкретных источников – второй аргумент метода on(). Это и есть всплытие ^{мне так думается}.

Метод append() нужно применять для существующей и обвешенной обработчиками формы, которую можно взять из скрытого блока, где эта форма в принципе сформирована. Можно создать переменные, где будут храниться скрытые формы

var $form1 = $( '#form1' );
// потом эту форму отправлять в окно
$popup.append( $form1 );
// или похожим методом
$form1.appendTo( $popup );
// и убирать из окна
$forma1.detach();

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