datatables jquery click event not working after pagination

Question

I am using http://datatables.net/

Activate Account

I trigger ajax call

Answer 1

I had the same issue. Every time my AJAX function(modalContentAjaxRefresh) update the table the paging stop. SO I just had to change my code from :

From :

$('.modal-toggle').off('click', modalContentAjaxRefresh).on('click', modalContentAjaxRefresh);

to:

$('#DataTables_Table_0_wrapper').on("click", ".modal-toggle", modalContentAjaxRefresh);

My button inside datatable is :

< a title="Edit" class="btn btn-xs btn-info modal-toggle"
data-style="zoom-in" href="/setting/account/{{account_turn.uuid}}/update" data-toggle="modal" data-target="#editAccount" wecare-method="GET">

Answer 2

The main important thing is to reassign the elements when click the pagination.

//function to assign event
var assign_actions = function(){
  //Some code  
}
  //when the page is ready
  $( document ).ready(function() {
    assign_actions();
    //Code to assign event when paginate
     $('.paginate_button').on('click', function(){
       assign_actions();
     });
   });

Answer 3

Because the event is attached only to existing elements.

You should change it to:

$("#tableId").on("click", ".activeAccount", function(){
   // your code goes here
});

Read more in the documentation of jQuery.on.

Answer 4

$("#product-list").on("click",".btn-delete-product",function(e){
    e.preventDefault();
    var prodId     =   $(this).attr("product-id"); 
    .... code to delete the record from the db...
  });

product-list is the table where data gets loaded and has paging enabled.

This works perfectly for me.

Answer 5

As @squaleLis said, the event is attached to only existing elements.

So, in my case I defined onclick event for the button and called it.

  <button class='btn btn-success activeAccount' onclick="YourMethod();">Activate Account</button>

  function YourMethod() {
     ....same code..
  }

Answer 6

$(document).on("click",".activeAccount",function(e){
 // your code goes here
});