Jquery Datatables and Bootstrap Toggle Doesn't work Together

Question

i'm using datatables from : https://www.datatables.net/

and also i'm using Bootstrap Toggle from : http://www.bootstraptoggle.com/

Here is my code :

<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>

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 ?

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

CAUSE

Pages other than first do not exist in DOM at the time of initialization, that is why your handler never gets called.

SOLUTION

You need to use event delegation by providing selector as a second argument in on() call, see example below:

$(document).ready(function(){
    $('#table-list-tour').DataTable();

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

From jQuery on() method documentation:

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

See "Direct and delegated events" in jQuery on() method documentation and jQuery DataTables – Why click event handler does not work for more information.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 29, 2016 at 21:50

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marcel Ang Over a year ago

Ah ~, Thanks for the solution. Kinda new to Jquery, i search for click function on google and it just return click(). Anyway, thanks for the solution

Collectives™ on Stack Overflow

Jquery Datatables and Bootstrap Toggle Doesn't work Together

1 Answer 1

CAUSE

SOLUTION

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

CAUSE

SOLUTION

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related