Is there an equivalent of $(document).ready to initialise after re-loading part of a page?

jquery

Solution

Have a look at event delegation using live. From the docs:

When you bind a "live" event it will bind to all current and future elements on the page (using event delegation). For example if you bound a live click to all "li" elements on the page then added another li at a later time - that click event would continue to work for the new element (this is not the case with bind which must be re-bound on all new elements).

An example:

$('#myTable td').live("click", function() {
    alert('hello!');
});

That will preserve the event(s) bound to the cells on the table even after it has been replaced. The live manual says:

Binds a handler to an event (like click) for all current - and future - matched element.

Alternatively, you can wrap your bindings into a function, and have that execute as a callback to the method that updates your table data, for instance:

function bindStuffToTable()
{
    $('#myTable td').click(function() {
       alert('Hello!');
    });
}

$('#myTable').load('/some/link', bindStuffToTable);

Or if the entire table gets replaced dynamically, which is more likely:

$('#someButton').click(function() {
    //replaces the contents of someDiv with the table generated by foo.php
    $('#someDiv').load('foo.php', bindStuffToTable);
});

Problem

I have the following pretty standard process: - I initialise my page in `$(document).ready`. This includes binding events to elements in a table. - The content of the table is then refreshed dynamically through an ajax call I now need to rebind events to the table content. Is there a standard way of doing this? i.e. is there an equivalent of `$(document).ready` that fires after a partial page DOM update? Thanks.

Original source