Question

我正在使用来自https://www.datatables.net/

的数据表

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

这是我的代码：

<table class="table table-striped table-hover" id="table-list-tour">
  <thead>
    <tr><th>Featured</th></tr>
  </thead>
  <tbody>
    <?php foreach ($packages as $package) : ?>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" class="shownCheckbox" id="<?php echo $package->id ?>" data-toggle="toggle">
          </div>
        </td>
      </tr>
    <?php endforeach ?>
  </tbody>
</table>

<Script>
  $('#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 !');
      }
    });
  });
</script>

问题是，在第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 – Why click event handler does not work。

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

1 个答案:

原因

解