jQuery 'on' не регистрируется в динамически генерируемом модальном всплывающем окне
У меня сложилось впечатление, что JQuery'son
Обработчик события должен был иметь возможностьСлушать' для динамически создаваемых элементов И что он должен был заменить поведениеlive
, Однако, что я испытал, так это то, чтоon
не захватывает событие щелчка при использованииlive
успешно!
Хитрый аспект моей ситуации заключается в том, что я не только динамически создаю контент, но ия делаю это через AJAX.get()
вызов и вставка результирующего HTML в модальный.dialog()
jQueryUI всплывающее окно.
Вот упрощенная версия того, что я пытался сделать (завернутый в$(document).ready(...)
):
$.get("getUserDataAjax.php", queryString, function(formToDisplay) {
$("#dialog").dialog({
autoOpen: true,
modal: true,
buttons...
}).html(formToDisplay);
});
$(".classThatExistsInFormToDisplay").on("click", function() {
alert("This doesn't get called");
});
Из документации дляon
Я нашел то, к чему я подходил, когда писал своиon
событие:
$("p").on("click", function(){
alert( $(this).text() );
});
Однако по какой-то причинеlive
будет работать как я ожидаю - тогда какon
подводит меня.
Это н'т вопрос для "как я могу заставить это работать " потому что я обнаружил, чтоon
будет успешным (захватывать клики), если я объявлю этовнутри function(formToDisplay)
Перезвоните.
Мой вопрос: что не так сon
что это не такнайти мои динамически созданные элементы в модальном всплывающем окне? Мой экземпляр jQuery - jquery-1.7.2. jQueryUI - 1.8.21.
Вот два jsFiddles, которые приближают проблему. Нажмите на словоТестовое задание" в обоих случаях увидеть разное поведение. Единственная разница в коде заменяетon
за .live
кудащелчок захвачен.live
кудащелчок НЕ захваченon
(нажмитеТест - кликни мне чтобы ничего не произошло).
Я понимаю, что могу просто использоватьon
ненадлежащим образом или просить его сделать что-то, что не было предназначено, но я хочу знать,Зачем это не работает (но если у вас есть что-то очень умное, не стесняйтесь поделиться). Спасибо за вашу мудрость!
Обновление / Ответ / Решение:
По словам пользователяне определено»разница в том чтоon
не делегированы полностью от вершиныdocument
объект тогда какlive
делает / является.
Как отмечает Клаудио, есть частиon
документация, которая ссылается на динамически созданные элементыи это что вы включаете в$("")
часть запросадолжен существовать во время выполнения.
Вот мое новое решение: захват событий кликовon
Мой модальный диалог, который, хотя и не имеет никакого контента при создании события во время выполнения, сможет найти мой контент и элемент с помощью специального класса, который генерируется позже.
$("#dialog").on("click", ".classThatExistsInFormToDisplay", function() {
... //(success! Event captured)
});
Спасибо!