How to bind an event handler to an iframe's onload with JQuery?

Question

I'm having some trouble getting binding to work with JQuery.

<iframe id="wufooFormz7x3k1" height="281" allowtransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="http://foo111.com"></iframe>

<script>
jQuery('#wufooFormz7x3k1').ready(function()
{
  jQuery('#wufooFormz7x3k1').bind('onload', alert('hi1'));
  jQuery('#wufooFormz7x3k1').bind('onload', function() { alert('hi2') });
});
</script>

The first bind generates an alert but then throws this error, and won't trigger alert for any subsequent loads of the iframe (which is what I'm trying to detect).

Uncaught TypeError: Cannot read property 'handler' of undefined and won't be triggered for subsequent onloads.

The second bind doesn't trigger at all.

Ideally, what I want is to bind against the iframe's onload so I can generate an alert each and every time the iframe is reloaded.

Answer 1

Use the load event.

jQuery('#wufooFormz7x3k1').bind('load', function() { alert('hi2') });

The first attempt alerts because you are executing the alert and passing the return value of the alert as a function, however that return value is not a function therefore an error occurs.

Also, the following isn't needed and doesn't really do what you think it does.

jQuery('#wufooFormz7x3k1').ready(function()

That ignores the '#wufooFormz7x3k1' and uses document instead. Since the script is located directly after the iframe tag, you can omit it because the iframe will be ready.