datatables jquery click event not working after pagination

Question

<button class='btn btn-success activeAccount'>Activate Account</button>

I trigger ajax call on onclick event, below is ajax call code:

$(".activeAccount").click(function() {
  var intCounselorId = $(this).parent().parent().find('input[class="counselorId"]').attr("value");
  var intOwnerId = $(this).parent().parent().find('input[class="userID"]').attr("value");
  var strAction = 'activateAccount';
  performAction(intCounselorId, intOwnerId, strAction);
});

function performAction(intCounselorId, intOwnerId, strAction) {
  $.ajax({
      url: '/admin/counselormanagement/expertmanagementgridaction',
      data: 'intCounselorId='+intCounselorId+'&intOwnerId='+intOwnerId+'&strAction='+strAction,
      type: "POST",
      async:false,
      success: function(intFlag) {
        if(intFlag == 1){
          location.reload();
        }
      }
  });
}

I'm trying to run an onclick event which works normally on page one, but as soon as I go to page 2 (or any other) it stops working.

I'm using jquery-1.10.2.min.js and 1.9.4 version of datatable

Is the .activeAccount button inside the content of the table? Also, note that it's really bad practice to use async: false, and the location.reload() in the success handler completely negates the entire point of making an AJAX request in the first place. — Rory McCrossan
– Rory McCrossan, Commented Jan 18, 2016 at 15:52
In that case you need to use a delegated event handler, as per @squaleLis's answer. You really should get rid of async: false and the location.reload() though. — Rory McCrossan
– Rory McCrossan, Commented Jan 18, 2016 at 15:59
I have given an answer here. stackoverflow.com/questions/25575996/… You may see this. — Md. Harun Or Rashid
– Md. Harun Or Rashid, Commented Feb 5, 2017 at 8:02
The solution suggested by @Md.HarunOrRashid is really helpful — Ogbonna Vitalis
– Ogbonna Vitalis, Commented Mar 12, 2020 at 8:46

Rishi Jagati · Accepted Answer · 2017-01-12 12:44:54Z

122

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.

edited Jan 12, 2017 at 12:44

Rishi Jagati

6261 gold badge6 silver badges28 bronze badges

answered Jan 18, 2016 at 15:55

squaleLis

6,5242 gold badges25 silver badges32 bronze badges

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

3 Comments

squaleLis Over a year ago

@sarower-jahan Thank you :)

sh6210 Over a year ago

In my case, before the click event was "$(".each_player").click(function(){ // my code goes here });" After modifying, "$("#playerGroupUI").on("click", ".each_player", function(){ // my code goes here });"

some_groceries Over a year ago

this fired the event multiple times instead of once!? 10 delete icons on the page and upon clicking one the delete confirm was fired twice

Mahmut Aydın · Accepted Answer · 2019-10-28 09:40:10Z

4

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

answered Oct 28, 2019 at 9:40

Mahmut Aydın

8691 gold badge13 silver badges21 bronze badges

Comments

Doug Mugnos · Accepted Answer · 2019-01-20 05:43:06Z

2

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

answered Jan 20, 2019 at 5:43

Doug Mugnos

311 bronze badge

Comments

Neelima Ediga · Accepted Answer · 2019-03-20 18:07:41Z

2

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

answered Mar 20, 2019 at 18:07

Neelima Ediga

3561 gold badge5 silver badges19 bronze badges

Comments

hackernewbie · Accepted Answer · 2020-10-23 10:44:58Z

0

$("#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.

answered Oct 23, 2020 at 10:44

hackernewbie

1,71223 silver badges13 bronze badges

Comments

Harshil Modi · Accepted Answer · 2022-03-03 21:12:32Z

0

I thinks a good and easy solution is to use drawCallback option

answered Mar 3, 2022 at 21:12

Harshil Modi

4363 gold badges10 silver badges21 bronze badges

Comments

fp007 · Accepted Answer · 2019-08-22 13:24:18Z

-1

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();
     });
   });

answered Aug 22, 2019 at 13:24

fp007

4801 gold badge8 silver badges23 bronze badges

Collectives™ on Stack Overflow

datatables jquery click event not working after pagination

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related