Question

感谢this thread我已经成功添加了一个ajax更新以及一些类交换我的数据表数据。但是，一旦我跳转到下一页，ajax函数就不会触发，也不会返回任何错误。似乎this question有同样的问题，虽然碰巧有一个内置的数据表函数来解决我怀疑在我的情况下的那个。

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函数，并且它没有对数据表分页引起的更改作出反应，但是我对jQuery知之甚少，不知道是否有＆＃39;是对的或如何解决它。感谢任何可以提供帮助的人！

Answer 1

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

更改

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

要

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

旁注：函数内的this仍然引用.box元素。

DataTable分页后无法使用其他jQuery函数

1 个答案: