在jQuery分页后不能使用其他DataTable函数

Question

多亏了这条线，我成功地添加了ajax更新，并对datatable数据进行了类交换。但是，一旦我跳到下一页，ajax函数就不会触发，也不会返回任何错误。这个问题似乎也有同样的问题，不过碰巧有一个内置的可数据函数来解决这个问题，我对此表示怀疑。

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

同样，在第一页上，一切都像冠军一样工作。我认为问题在于，当DOM安装时，ajax函数是安装的，并且它不会对datatable分页所引起的更改做出反应，但我对jQuery不太了解，不知道是否正确，也不知道如何修复它。感谢任何能帮忙的人！

Answer 1

您可以尝试使用事件委托。当可数据插件切换页面时，将删除当前的.box元素，并将新的元素放入表中。使用事件委托，您可以将事件绑定到表中，以便新的.box也会触发该事件。

变化

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

至

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

Sidenote:函数中的this仍然引用.box元素。