Click event not registering on second page.

Question

I'm using tablesorter and tablesorter.pager. Here is my code.

$(document).ready(function() {
$("#peopletable")
        .tablesorter({ widthFixed: true, widgets: ['zebra'] })
        .tablesorterFilter({ filterContainer: $("#people-filter-box"),
            filterClearContainer: $("#people-filter-clear-button"),
            filterColumns: [1, 2, 3],
            filterCaseSensitive: false
        })
        .tablesorterPager({ container: $("#peoplepager") });

$("#peopletable tr.data").click(function() {
    var personid = $(this).attr('id');
    $.ajax({
    type: "POST",
    url: "/Search/GetDocumentsByPerson",
    data: { "id": personid },
    datatype: "json",
    success: function(data) {
        var results = eval(data);
        $("#documentstable > tbody tr").remove();
        $.each(results, function(key, item) {
            $("#documentstable > tbody:last").append(html);
        });
        $("#documentstable").trigger("update");
    }
});
});
});

Everything works great except when I click on the next page my button click event doesn't fire. Is this a known issue with jquery tablesorter?

Answer 1

It's because the elements are updated, the ones you bound the click handler to are gone, you can use .live() to resolve this, change this:

$("#peopletable tr.data").click(function() {

To this:

$("#peopletable tr.data").live('click', function() {

Alternatively, if #peopletable isn't destroyed you can use .delegate(), like this:

$("#peopletable").delegate('tr.data', 'click', function() {

Answer 2

Creating a new element won't duplicate the event created with the click method wheras the live method does it.