Question

我有一个表，我正在使用数据表显示。表中的一列是复选框。选中（或取消选中）复选框会导致Ajax事件。像这样：

<script type="text/javascript">
  $(document).ready(function() {
    $(".data-table").dataTable({});
    $(".my-checkbox").click(function() {
       $.ajax(....)
    })
  })
</script>

<table class="data-table">
  <tr>
    <td><input type="checkbox" class="my-checkbox"></td>
  </tr>

  <!-- repeat many times -->
</table>

这在初始页面加载时效果很好，但是一旦我使用“搜索”框，更改（）方法就会从搜索找到的任何内容中解除绑定。

搜索完成后，是否有一个API钩子可用于将click（）处理程序重新绑定到复选框？或者有更好的方法吗？

Answer 1

.click是.bind的快捷方式，它仅绑定页面中的元素。你必须使用.live：

$('.my-checkbox').live('click', handler);

另一种选择是使用委托：

$('.data-table').delegate('.my-checkbox', 'click', handler);

更新：自jQuery 1.7+起，.live和.delegate已被弃用并被.on取代：

$('.my-checkbox').on('click', handler);

Answer 2

是的，您可以手动重新绑定它或使用.live()

  $(document).ready(function() {
    $(".data-table").dataTable({});
    $(".my-checkbox").live('click', function() {
       $.ajax(....)
    })
  });

Answer 3

问题是数据表动态加载行。在数据表绘制时重新绑定事件，首先取消绑定任何旧事件。

  <script type="text/javascript">
    $(document).ready(function() {
      var dataTable = $(".data-table").dataTable();
      // draw will be called when paging/filtering
      dataTable.on('draw', function() {
        bindEvents();
      });
      dataTable.draw();

    });
    function bindEvents() {
        // Unbind any old events first
        $(".my-checkbox").off('click');
        $(".my-checkbox").on('click', function() {
          $.ajax(....)
        });
      })
    }
  </script>

如何在使用“datatables”搜索后重新绑定click（）事件

3 个答案: