Не удается поймать jQuery DOM Событие, которое находится внутри iframe

Question

У меня есть , который содержит конкретную веб-страницу. В этом фреймах веб-страницы, следующий триггер событий настроен с помощью JQuery:

console.log($('.myElement').trigger('testEvent')); 

Это событие запускается каждые ~ 20 секунд.

Назад на родительской странице, при первой загрузке страницы, я настроить обработчик событий для события:

$('iframe').load(function(){ 

    console.log("Iframe loaded"); 

    $('iframe').contents().find('.myElement').on('testEvent', function(e) { 
    console.log("Event Fired!", e); 
    }); 

}); 

Так после загрузки IFrame, обработчик событий настроен.

По какой-то причине обработчик событий никогда не запускается. Событие определенно запускается, потому что я вижу результат console.log() в консоли. Я не вижу никаких ошибок или чего-либо в консоли.

Также я могу вручную запустить его и посмотреть, что обработчик работает:

$('iframe').contents().find('.myElement').trigger('testEvent'); 

Что я здесь делаю неправильно?

Answer 1

Я понял. Таким образом, родительский документ и документ содержимого iframe имеют свой собственный экземпляр jQuery. По-видимому, для одного экземпляра jQuery невозможно (легко?) Прослушивать события, вызванные другим экземпляром jQuery. Моя проблема в вышестоящем документе была такая:

$('iframe').contents().find('.myElement').on('testEvent', function(e,data) {}); 

Здесь я пытаюсь использовать родитель JQuery для обработки события. Это не сработает. Я должен использовать ванильный JavaScript:

document.getElementById('#my_iframe').contentWindow.$('.myElement').on('testEvent'), function(e,data) {}); 

Так вот я использую ваниль JavaScript, чтобы добраться до содержимого Iframe и затем JQuery с этого момента является JQuery экземпляр в Iframe, которая является такой же экземпляр JQuery, что срабатывает триггер.

Это сработало отлично!