ajax call catch event not working on Bootstrap switch inside datatables plugin on responsive view

Question

Ajax call catch event not working on Bootstrap switch inside datatables plugin on responsive view.

$('.switch').bootstrapSwitch();
$('.switch').on('switchChange.bootstrapSwitch', function () 
{
    var id =$(this).attr("attrid");  
    $.ajax({
        type:'POST',
        url:'<?php echo base_url();?>parties/party_status_ajax',
        data:{'id':id,'checked':$(this).bootstrapSwitch('state')},
        success: function (data)
        {
            $('.close').click();
            $('#successmessage').html(data); 
        }
    });
 });

Answer 1

The problem might be that you are binding the event to an element that doesn't exist in the html when that code runs, you need to use delegated events in order to bind it to subsequent elements of the datatable

something like below

$( "#dataTable tbody" ).on( "switchChange.bootstrapSwitch", ".switch", function() {
   var id =$(this).attr("attrid");  
    $.ajax({
        type:'POST',
        url:'<?php echo base_url();?>parties/party_status_ajax',
        data:{'id':id,'checked':$(this).bootstrapSwitch('state')},
        success: function (data)
        {
            $('.close').click();
            $('#successmessage').html(data); 
        }
    });
});