点击事件未在第二页上注册

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

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

Answer 3

创建一个新元素不会复制用click方法创建的事件，而live方法会这样做。