'Click event not registering on second page

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?

htmljquerypaginationjquery-eventstablesorter


Solution 1:[1]

I have also faced the same kind of problem with tablesorterPager second page after using Jeditable (edit in place) plugin for some element in the tablesorterPager used table.

I have tried editing the data bind function in Jeditable as follows

original code 

 $(this).bind(settings.event, function(e) {

here settings.event equals to the event parameter which we are defining with options eg: click

modified code

 $(this).live(settings.event, function(e) {

But.. I found the error with tablesorterPager within pages other than the first page is not because of the binding of element event. when we are calling tablesorterPager to any table with many rows, only the first page rows of the table is affected on the page load. so only the first page rows are called with Jeditable plugin. other rows in the other pages are not assigned with the plugin. because of this reason, the events in other pages than first page will not work.

to prevent above situation, we can add Jeditable plugin calling inside updatePageDisplay function.

eg:

function updatePageDisplay(c) {

    $(".tablerowdata").each(function(){

            $(this).editable("ajax/save.php", {
              tooltip : "click to edit...",
              data   : {"selectid1":"selectval1","selectid2":"selectval2","selectid3":"selectval3"},
              type   : "select",
              submit : "ok",
              event     : "click",
              select : "true",
            });
          });

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Saliya Randunu
Solution 2 Boris Delormas

Related Questions