Jquery Datatables and Bootstrap Toggle Doesn't work Together
<p>i'm using datatables from : <a href="https://www.datatables.net/" rel="nofollow">https://www.datatables.net/</a></p>

<p>and also i'm using Bootstrap Toggle from : <a href="http://www.bootstraptoggle.com/" rel="nofollow">http://www.bootstraptoggle.com/</a></p>

<p>Here is my code : </p>

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

&lt;Script&gt;
  $('#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 &amp;&amp; data !== '') {
          selectedCheckBox.attr('checked', false);
          alert(data);
        }
      },
      error:function()
      {
        alert('Toggle Failed !');
      }
    });
  });
&lt;/script&gt; 
</code></pre>

<p>The problem is, in page 1, the AJAX in bootstrap toggle event works perfectly, when i move to page 2, all the ajax did not work at all,
why ?</p>