Clever Geek Handbook

Bind event to dynamically created iframe element

I want to bind an event listener to an element that doesn't already exist in the DOM. This will now be the case for jQuery.on ().

But in this case, I need to bind the event to an element in the iFrame. It can be controlled

$("#iFrame").contents().find(".my_element").bind(...

et cetera. But I'm in a situation where the element is not yet present in the iFrame-Document (its added by user interaction), thus .find () will return an empty array and the event will not be attached.

Is it possible to bind event listeners to specific iFrame elements that are created later? I only find solutions for already existing elements, sporting contents () and find ().

Thanks in advance!

+3


source to share


2 answers


try it

$("#iframe").load(function(){
    $("#iFrame").contents().find(".my_element").bind('click',function(){
       // Your code here
    });
});


Hope this helps .. Cheers.

0


source


I found a solution that works well. If that doesn't work, just check if the iframe exists via alert( $("#iframe").length );

. The value must be above 0.



$("#iframe").contents().find('body').on("click", ".my_element", function (e)
{
    alert("Give it to me dude ;)");
});
0


source






More articles:


All Articles