Могу ли я поймать событие изменения из динамически созданного элемента ввода HTML дальше DOM?

Question

У меня есть элемент формы <select>, который генерируется динамически после загрузки страницы. Я использовал jQuery для подключения события change, который обновлял бы другие поля в форме и хотел бы устранить необходимость переустановки обработчика каждый раз, когда была заменена форма, содержащая <select>.

Для событий click событий на динамических элементах я перешел к ненавязчивому JavaScript и хотел использовать этот подход для change - но не удался. Присоединение к <select> напрямую было громоздким, потому что, когда узел заменен в DOM, подключенный прослушиватель событий умирает вместе с ним, а новый узел должен быть снова подключен.

Так что я хотел бы знать, есть способ ненавязчиво назначить обработчик по change события к родительскому элементу недавно созданного <select> и пусть пузырь событий до обработчика на ранее существующий элемент, в чтобы избежать прикрепления обработчика каждый раз, когда создается новый целевой элемент ввода?

Answer 1

Да!

$('#StaticParentNode').on('change',"select.qualifiers", function(){ alert("Change detected from parent"); });

Естественно, я, наконец, получил эту работу через 2 минуты после размещения моего первоначального ответа (ниже). Doh.

---

No.

Придавая ненавязчивые слушатель событий на родителях <div> или document работает отлично подходит для барботирования click события из элементов, которые ранее не существовали на странице, вы можете подключить только слушатель событий к элементу , который имеет такой тип события.

Как указано в jQuery .change API docs (хотя этот вопрос не JQuery конкретные):

Событие изменения посылается к элементу, когда его значение изменяется. Это событие ограничивается <input> элементами, <textarea> коробки и <select> elements.`

С <div> и document не событие изменения, они не могут перехватить одну из своих детей либо.

Решения:

1. Просто установите onchange к ранее определенной функции при создании элемента: <select onchange='MyModule.selectChanged()'>[<options>]</select>. Не чисто от разделения проблем, а простой подход с минимальным дополнительным HTML, добавленным в запрос AJAX, и без поимки с обработчиками после завершения вызова AJAX.

   или

2. (Re) прикрепить прослушиватель событий каждый раз, когда вы создаете новые элементы, которые требуют его, либо «вручную» (например, в $.ajax success функции) или путем соединения его в какой-либо инструмент обрабатывает ваш AJAX результаты (например,изменение или расширение .prototype). См. Примеры в другом месте на SO.