javascript - How can i bind an event to an element inside a local iframe?

Question

Firstly both the parent page and the iframe are hosted on the same server (my localhost on WAMP) so same origin policy should not be an issue here.

I can't get the trigger to work. My iframe has the id of iframe.

$(window).load(function(){
  //iframe ad hovers
  $('#iframe').contents().find('body div').click(function(){
    alert('do something here');
  });
}); 

what am i doing wrong?

Answer 1

I'm not sure the browser's going to propagate a "click" event from the window context of the <iframe> out to the containing window. Does the document loaded into the <iframe> have its own copy of jQuery? If so, you can try this:

$('#iframe').contents().$.find('body div').click(function(){
  alert('do something here);
});

That change makes the jQuery code in the <iframe> window handle the event.

Well I think that @jAndy is right and that should work as is - but you have to make sure the document in the frame is loaded. Try this:

$('#iframe').load(function() {
  $(this).contents().find('body div').click(function() { alert("hi"); });
});