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

Question

Hi.

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

Answer 2

I use $(document).ready() again if I receive a partial update...

This is the AJAX response

<script type="text/javascript">
    $(document).ready(function() {
        alert($('div.partialresponse').html());
        //Alerts 'content'
    });
</script>
<div class="partialresponse">
   content
</div>