Вопрос по click, jquery, modal-dialog, ajax – jQuery 'on' не регистрируется в динамически генерируемом модальном всплывающем окне

9

У меня сложилось впечатление, что jQueryon обработчик события должен был иметь возможность «слушать»; для динамически создаваемых элементов И что он должен был заменить поведение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 подводит меня.

This isn't a question for "how can I make it work" потому что я обнаружил, чтоon будет успешным (захватывать клики), если я объявлю этоinside function(formToDisplay) Перезвоните.

My question is: что не так сon что он не находит мои динамически созданные элементы в модальном всплывающем окне? Мой экземпляр jQuery - jquery-1.7.2. jQueryUI - 1.8.21.

Вот два jsFiddles, которые приближают проблему. Нажмите на слово & quot; Тест & quot; в обоих случаях увидеть разное поведение. Единственная разница в коде заменяетon заlive.

кудащелчок захваченlive.

кудащелчок НЕ захваченon (нажмите «Тест» - нажмите «Мне», чтобы ничего не произошло).

Я понимаю, что могу просто использоватьon ненадлежащим образом или просить его сделать что-то, что не было предназначено, но я хочу знать,why это не работает (но если у вас есть что-то очень умное, не стесняйтесь поделиться). Спасибо за вашу мудрость!

Update / Answer / Solution:

Согласно пользователю "undefined", разница в том, чтоon не делегированы полностью от вершиныdocument объект тогда какlive делает / является.

Как отмечает Клаудио, есть частиon документация, которая ссылается на динамически созданные элементыand that что вы включаете в$("") часть запросаneeds to exist at runtime.

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

$("#dialog").on("click", ".classThatExistsInFormToDisplay", function() {
    ... //(success! Event captured)
});

Спасибо!

Ваш Ответ

2   ответа
10

live делегирует событие из объекта документа, ноon не, если вы хотите делегировать событие с помощьюon метод, вы должны делегировать событие от одного из статических родителей элемента илиdocument объект:

$(document).on("click", ".clickHandle", function() {
    alert("Content clicked");
});
Вы спасатель, сэр! Спасибо.
@veeTrain Добро пожаловать.
Захватывающий! Я обнаружил, что ваше предложение прошло успешно. Как здорово! Я прикрепилon событие в модальном диалоге, а затем ограниченные клики в классе, о котором я хочу помнить. Хотя это будет скорее триггером, чем захватом только моего класса (предположение), это кажется хорошим решением. Спасибо за Ваш ответ! veeTrain
4

Проблема в том, что элемент, к которому вы присоединяете событие, должен существовать.

Вы должны использоватьon как это, чтобы захватить клики наp теги, созданные динамически

$("#existingContainerId").on("click", "p", function(){
    alert( $(this).text() );
});

если у вас нет соответствующего существующего контейнера для использования, вы можете использовать$("body") или же$(document)

If selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next

Взгляните на разделDirect and delegated events Вот  Больше подробностей

Вот оно! Спасибо, что указали мне на соответствующую часть документации по этому вопросу. veeTrain

Похожие вопросы