Нажмите событие, не регистрирующееся на второй странице

Question

Я использую tablesorter и tablesorter.pager. Вот мой код.

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

Все работает отлично, за исключением случаев, когда я нажимаю на следующую страницу, мое событие нажатия кнопки не срабатывает. Это известная проблема с jquery tablesorter?

Answer 1

Это потому, что элементы будут обновлены, те, которые вы связали обработчик щелчка к ушли, вы можете использовать .live(), чтобы решить эту проблему, измените это:

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

Для этого:

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

В качестве альтернативы, если #peopletable не уничтожено, вы можете использовать .delegate(), например:

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

Answer 2

Создание нового элемента не будет дублировать событие, созданное с помощью метода click, если это делает метод live.

Answer 3

Я также столкнулся с такой же проблемой с tablesorterPager второй страницей после использования Jeditable (редактировать на месте) плагина для некоторого элемента в таблице tablesorterPager.

Я попытался отредактировать функцию связывания данных в Jeditable следующим

исходный код

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

здесь settings.event равен параметру события, которые мы определяем с опциями, например: нажмите

изменен код

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

Но .. Я нашел ошибку с tablesorterPager в пределах страниц, отличных от первой страницы, не из-за привязки события элемента. , когда мы вызываем tablesorterPager в любую таблицу со многими строками, только строки первой страницы на таблицу влияет на загрузку страницы. поэтому только строки первой страницы вызываются с Jeditable плагин. другие строки на других страницах не назначаются плагином. по этой причине события на других страницах, кроме первой страницы, не будут работать.

предотвратить выше ситуации, мы можем добавить Jeditable плагин вызова внутри updatePageDisplay функцию.

например:

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