Adding a row to a table in an iFrame with jQuery (

Question

I have a page that is loading an iFrame that has it's source based on what link the user clicks. The iFrame returns a small table that I need to add a row to.

My issue is that I need use something like .live or .delegate as the iFrame is not loaded on document.ready. How do I tie the .append to a .live or .delegate on the iFrame load and not a click or mouseover type function?

I have tried:

$(document).ready(function(){
    $('#click').click(function(){
        $('#myFrame').attr('src', 'http://iframe_link_here/');
    });

// Add the new row
$('<tr><td>New Row</td><td>goes here</td></tr>').appendTo('#myTable');
});

but as the table isn't there on document.ready, and since I am wanting to add this row on the iFrame load, and just don't know how to attach to it.

Thanks for any help.

Answer 1

Just an idea:

$(document).ready(function(){
    $('#click').click(function(){
        $('#myFrame').attr('src', 'http://iframe_link_here/');
    });

   $('#myFrame').on('load',function(){
      // Add the new row
      $('<tr><td>New Row</td><td>goes here</td></tr>').appendTo('#myTable');
   });

});

EDIT: .live() is now deprecated, so .on() should be used instead.