#javascript #dom-events
#javascript #dom-события
Вопрос:
У меня есть страница с переменным количеством модалов. Когда отображается модальное значение, я добавляю событие click к кнопке в модальном. Когда я нажимаю на кнопку, событие запускается и отображается следующий модальный параметр. Однако во втором модальном режиме ничего не срабатывает, когда я нажимаю на кнопку.
Есть мысли относительно того, почему прослушиватель событий не запускается при втором нажатии.
Это код для добавления прослушивателя событий к каждому модальному. onSubmission это функция, которая выполняет некоторые действия ajax и скрывает текущий модальный параметр, а затем показывает следующий модальный параметр.
function addSubmitAction(formId) {
console.log(formId);
document.querySelector('#modal-submit').addEventListener('click', function _listener() {
onSubmission({ 'id': formId });
document.querySelector('#modal-submit').removeEventListener('click', _listener, true);
}, true);
}
Комментарии:
1. Вставляется ли вторая модальная функция динамически? Затем вам нужно снова привязать событие (после его вставки)
2. Все ли ваши модальности одинаковы
id?3. Похоже, вы удаляете прослушиватель событий, прежде чем получите возможность нажать следующую модальную кнопку. Вам вообще нужно удалять прослушиватель?
4. Добавьте
console.log(document.querySelector('#modal-submit'))послеconsole.log(formId), и я думаю, вы увидите старую модальную кнопку, которая не существует.5. Второй модал на самом деле точно такой же модал, просто с другими данными. Модальности имеют разные идентификаторы. Поскольку нужен другой идентификатор, мне нужно добавить нового слушателя или, по крайней мере, нужен способ получить идентификатор для функции onSubmission. Я могу использовать jQuery, но стараюсь избегать этого (в основном просто потому, что).
Ответ №1:
может быть, вам нужно получить событие click на корневом узле?
document.addEventListener('click', ({target}) => {
if( target.id !== submitId ) return;
/// your logic
});