How to add click event to a iframe with JQuery

Question

Hi all,

I have an iframe on a page, coming from a 3rd party (an ad). I'd like to fire a click event when that iframe is clicked in (to record some in-house stats). Something like:

$('#iframe_id').click(function() {
    //run function that records clicks
});

..based on HTML of:

<iframe id="iframe_id" src="http://something.com"&gt;&lt;/iframe&gt;

I can't seem to get any variation of this to work. Thoughts?

Answer 1

There's no 'onclick' event for an iframe, but you can try to catch the click even of the document in the iframe:

document.getElementById("iframe_id").contentWindow.document.body.onclick = 
function() {
  alert("iframe clicked");
}

EDIT Though this doesn't solve your cross site problem, FYI jQuery has been updated to play well with iFrames:

$('#iframe_id').bind('click', function(event) { });