jQuery Event when New Page Loads in iFrame

I'm trying to set up an event on the parent that gets triggered when an iframe loads a new page (like开发者_如何学编程ly via the user clicking a link).

HTML:

<iframe name="posts" id="posts" src="edit.php">

JS:

$(document).ready(function() {
    $('iframe#posts').live('load', function() {
        console.log('live');
    });
});

The problem is that the console.log() statement never gets triggered. How can I achieve what I'm trying to do?

The easiest way to fix your problem is to have your iframe created with jQuery as well.

$(document).ready(function() {
    $("<iframe />").attr({
        id: "posts",
        src: "edit.php"
    }).load(function() {
        console.log('live');
    }).appendTo("body");

This question has been asked here before.

The way I use is

<iframe onload="hide_html_player_contents_loading();" ...../>

My best guess is that the 'load' event on the iframe has fired before the 'ready' event on the document, which means that the handler is installed too late. You may have to use the old-fashioned onload in the iframe element itself.

Or you could just put the $('iframe#posts').live() snippet in a top-level script rather than in the ready handler.