datatables jquery click event funktioniert nach Paginierung nicht

ich benutze http://datatables.net/

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

Ich löse einen Ajax-Aufruf bei einem Onclick-Ereignis aus, unten ist der Ajax-Anrufcode:

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

Ich versuche, ein Onclick-Ereignis auszuführen, das auf Seite eins normal funktioniert, aber sobald ich auf Seite 2 (oder eine andere) gehe, funktioniert es nicht mehr.

Ich verwende jquery-1.10.2.min.js und die Version 1.9.4 von Datatable

Denn das Event wird nur an bestehende Elemente angehängt.

Sie sollten es ändern in:

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

Lesen Sie mehr in der Dokumentation von jQuery.on.

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

Ich hatte das gleiche Problem. Jedes Mal, wenn meine AJAX-Funktion (modalContentAjaxRefresh) die Tabelle aktualisiert, stoppt das Paging. SO musste ich nur meinen Code ändern von:

Aus :

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

zu:

$(‘#DataTables_Table_0_wrapper’).on(“click”, “.modal-toggle”, modalContentAjaxRefresh);

Meine Schaltfläche in der Datentabelle ist:

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

Wie @squaleLis sagte, ist das Ereignis nur an vorhandene Elemente angehängt.

In meinem Fall habe ich also das onclick-Ereignis für die Schaltfläche definiert und aufgerufen.

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

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

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

Produktliste ist die Tabelle, in die Daten geladen werden und Paging aktiviert ist.

Das funktioniert perfekt für mich.

Ich denke, eine gute und einfache Lösung ist die Verwendung drawCallback Möglichkeit

Wichtig ist vor allem die Neuzuordnung der Elemente beim Klick auf die Paginierung.

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