How can i bind an event to an element inside a loc

问题:

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?

回答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"); });
});

回答2:

Your code is not wrong; i think the only mistake you are doing is that you are asking for the iframe's content on the parent page load which means at this stage the iframe has not been loaded yet.

Try my quick example http://jsfiddle.net/UFM44/4/ It is same as your code but i trigger it after clicking on "now" link. if you then click on the logo you can see the alert() message.