web-dev-qa-db-de.com

jQuery-Datentabellen-Ereignis von Datatables funktioniert nach der Paginierung nicht

Ich benutze http://datatables.net/

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

Ich löse bei Onclick-Ereignissen einen Ajax-Aufruf aus. Nachfolgend finden Sie 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 normalerweise auf Seite 1 funktioniert, aber sobald ich zu Seite 2 (oder einem anderen) gehe, funktioniert es nicht mehr.

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

javascriptjqueryajaxdatatable
18
ajay p

Weil das Ereignis nur an vorhandene Elemente angehängt wird.

Sie sollten es ändern in:

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

Lesen Sie mehr in der Dokumentation von jQuery.on .

57
squaleLis

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

Also habe ich in meinem Fall ein onclick-Ereignis für die Schaltfläche definiert und es aufgerufen.

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

  function YourMethod() {
     ....same code..
  }
2
Neelima Ediga

Ich hatte das gleiche Problem. Jedes Mal, wenn meine Funktion AJAX (modalContentAjaxRefresh) die Tabelle aktualisiert, wird der Seitenwechsel beendet. SO Ich musste nur meinen Code ändern von:

Von : 

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

zu:

$ ('# DataTables_Table_0_wrapper'). Ein ("click", ".modal-toggle", ModalContentAjaxRefresh);

Mein Knopf in der Datentabelle ist:

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

1
Doug Mugnos