Define an event on iFrame element with jQuery

I try to define a live event on img tags store on a iFrame. For example, I would like obtain a simple javascript alert box when I click a image on my iFrame.

Do you know how i can define the events for the iFrame, because I would like to put a thin开发者_Go百科g like $('img').live("click",function().... but only for the elements on iFrame.

Please note: img tags are dynamically added on my iFrame after page load.

Thanks for your help.

Nicolas

You can do it if you

1. make sure that the page in the iframe has its own copy of jQuery loaded [ed.: only really necessary for jQuery operations internal to the frame's page itself]
2. from the outer document, work into the iframe document like this:

$('#iframeId').contents().find('img') // ...

The other solutions here are largely myopic, as what you are trying to do is fairly complicated in the underlying javascript.

I'd suggest using jquery context as well - and I'd strongly suggest waiting for the iframe to totally load or else none of the previous suggestions could work anyway...

$("#frame").ready(function () { //wait for the frame to load

  $('img', frames['frame'].document).bind("click",function(){
   alert('I clicked this img!');
  });

});

This should generally work UNLESS you update the iframe or refresh it, in which case all the event bindings will fail... and worse yet the .live events don't appear to be supported in iframes - at least not for me.

 $("iframe").contents().find("img")

This will target images within the iFrame. But be aware that jquery will only traverse the iFrame if it is not a violation of the browser's (or jquery's) cross-site policy.

That means if the iframe is google.com, you can't touch the inner DOM.

jQuery.bind() won't work with external documents. At least in jQuery 1.6.2.

However you can bind to DOM events:

$("iframe").contents().find("img").onclick = function() { // do your staff here };

If you do not have full list of images at the moment, you can use events propogation:

$("iframe").contents().find("body").onclick = function() { // do your staff here };

It will work event with custom events:

$("iframe").contents().find("body").onmyevent = function() { // do your staff here };

One more thing to remember... frame content is loaded asynchronously. So bind your handlers AFTER your iframe content is loaded:

var $iframe = $("iframe"); 
$iframe.bind("load", null, funcion(e) {
    $iframe.contents().find("body").onclick = function() { // do your staff here }; 
});

For more complicated cases handle your images clicks inside iframe, and trigger your custom events that you can later handle on the body level. Especially if you have totally dynamic content and want to bind to 'live' events inside iframe.

you can fire event innner like this:

parent.$('#dlg').trigger('onTitle');

then hold event like this:

$('#dlg').bind('onTitle', function(){ alert(); });

this worked for me. NB: make sure you have referenced jquery library on the iframe page as well.

$(document).ready(function(){
    $('#iframeid').load(function(){ //make sure that all elements finish loading
            $('#iframeid').contents().find('img').live({
                 click: function(){
                    alert('clicked img');
                 }
            });
        });
    });