Take the 2-minute tour ×

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

$(document).ready(function() {
        .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');
    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);

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?

share|improve this question

3 Answers 3

up vote 7 down vote accepted

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:


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() {
share|improve this answer
What would be the advantage of using delegate instead of live? –  Dale Marshall May 6 '10 at 15:38
@Cptcecil - Both listen for the click event to bubble in this case, .live() waits for it to bubble all the way up the DOM to document, .delegate() captures it much sooner at the table level, so it's just less work happening on the browser with .delegate()....usually an immeasurably small performance difference though. –  Nick Craver May 6 '10 at 15:42
Using Jquery 1.9.1 .on did not work, .live does. –  Ken May 4 at 23:08

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.


function updatePageDisplay(c) {


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

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

share|improve this answer

Your Answer


