Question

I have the following pretty standard process:

1. I initialise my page in $(document).ready. This includes binding events to elements in a table.
2. 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.

Answer 1

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);
});