Jquery数据表和Bootstrap切换不能一起工作

我使用的数据表来自： https ： //www.datatables.net/

我也在使用Bootstrap Toggle： http ： //www.bootstraptoggle.com/

这是我的代码：

 
 
Featured
 
 
  
 
 
 <input type="checkbox" class="shownCheckbox" id="id ?>" data-toggle="toggle"> 
 
 
  
 
  $('#table-list-tour').DataTable(); $(".toggle-group").click(function(){ var selectedCheckBox = $(this); var id = selectedCheckBox.parent().children('input').attr('id'); var isChecked = selectedCheckBox.is(':checked'); $.ajax({ url : 'A_LINK', type : 'post', data : {'id':id}, success:function(data) { console.log(data); if (isChecked && data !== '') { selectedCheckBox.attr('checked', false); alert(data); } }, error:function() { alert('Toggle Failed !'); } }); });  

问题是，在第1页中，引导切换事件中的AJAX工作正常，当我转到第2页时，所有ajax根本不起作用，为什么？

Answer 1

原因

在初始化时，DOM中不存在除第一个以外的页面，这就是您的处理程序永远不会被调用的原因。

解

您需要通过在on()调用中提供选择器作为第二个参数来使用事件委派，请参阅下面的示例：

 $(document).ready(function(){ $('#table-list-tour').DataTable(); $('#table-list-tour').on('click', '.toggle-group', function(){ // ... skipped ... }); }); 

从jQuery on()方法文档：

委托事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。

请参阅jQuery on（）方法文档和jQuery DataTables中的 “直接和委派事件” – 为什么单击事件处理程序不能用于获取更多信息。