Невозможно использовать другую функцию jQuery после подкачки данных DataTable

Question

Благодаря this thread Я успешно добавил обновление ajax наряду с некоторой заменой класса на мои данные данных. Однако, как только я перехожу на следующую страницу, функция ajax не срабатывает и не возвращает никаких ошибок. Кажется, что this question имеет ту же проблему, хотя так получилось, что для решения этой проблемы существует встроенная функция datatables, в которой я сомневаюсь, что в моем случае есть.

HTML:

<table id="datatable" class="display dataTable" role="grid"> 
    <tbody> 
    <tr class="odd" role="row"> 
     <td class="formcell"><input id="actionitem" class="box" type="checkbox" value="1234" name="actionitem[]"></td> 
    </tr> 
    <tr class="even" role="row"> 
     <td class="formcell"><input id="actionitem" class="box" type="checkbox" value="5678" name="actionitem[]"></td> 
    </tr> 
</table> 

JQuery:

$(document).ready(function() { 
    $("#datatable").dataTable({ 
    bFilter: false 
    }); 
    $(".box").change(function() { 
    var id=$(this).val(); 
    var dataString = "id=" + id + "&crudtype=myapp"; 
    var clickedObj = $(this).parent().parent(); 
    $.ajax({ 
     type: "POST", 
     url: "/myphppage", 
     data: dataString, 
     cache: false, 
     success: function() { 
      var oldClass = clickedObj.attr("class"); 
      clickedObj.fadeTo(1, 1.0, function(){ 
      clickedObj.removeClass(oldClass).addClass("updated"); 
      clickedObj.fadeTo(3000, 1.0, function(){ 
      clickedObj.removeClass("updated").addClass(oldClass); 
      }); 
     }); 
     } 
    }); 
    }); 
}); 

Опять же, на первой странице все это работает как чавканье. Я предполагаю, что проблема заключается в том, что функция ajax устанавливается при установке DOM и что она не реагирует на изменения, вызванные данными подкачки, но я не знаю достаточно о jQuery, чтобы узнать, правильно это или как это исправить. Спасибо всем, кто может помочь!

Answer 1

Вы можете использовать event delegation. Когда плагин datatables переключает страницы, текущие элементы .box удаляются, а новые помещаются в таблицу. При делегировании событий вы можете привязать событие к таблице, так что новый .box должен также запустить событие.

Изменить

$(".box").change(function() { 

К

$("#datatable").on("change", ".box", function() { 

Sidenote: this внутри функции до сих пор относится к .box элементу.