Почему $ (документ) .on (событие, sel, f); не работает, но $ (документ) .find (sel) .on (событие, f); делает?

Question

Я попытался настроить прослушиватель событий с помощью jquery в iframe со следующим кодом:

function reportThanks() {                                                                                                                           
    //$(document).find('a.report-button').on('click', function (event) {
    $(document).on('click', 'a.report-button', function (event) {
        alert("Thx!");
  });
}

С текущим (некомментированным) кодом, alert() не срабатывает. Но это с предыдущим (прокомментировано).

В чем разница между теми, кто может объяснить, что одно работает, а другое нет?

Связана ли проблема с такой же политикой происхождения , поскольку она находится в iframe?

Примечание: прослушиватель событий настроен в iframe.

Answer 1

Делегирование событий не будет работать, если есть элемент, содержащий a.report-button, который также имеет обработчик click, и этот обработчик вызывает event.stopPropagation(). Делегирование зависит от того, как событие всплывает в элемент, с которым вы связываете обработчик (document в вашем случае). Когда событие достигает document, jQuery проверяет, соответствует ли исходная цель a.report-button, чтобы определить, должен ли выполняться обработчик. stopPropagation() прекращает пузыриться, поэтому событие никогда не достигает document.

Решение состоит в том, чтобы привязать ваше событие к более близкому контейнеру, который находится внутри элемента, который останавливает распространение.

$("#container").on("click", "a.report-button", function(event) {
    alert("Thx!");
});