Paginierung Click Event wird nur einmal ausgeführt

Question

Ich habe eine Ajax Paginierung aktiviert WebGrid, also im Grunde in diesem WebGrid habe ich Kontrollkästchen in der letzten Spalte, wenn Benutzer jedes Kontrollkästchen aktiviert und versucht, zur zweiten Seite mit Paginierung Link zu navigieren, rufe ich ein Klicken Sie auf die Funktion für den Paginierungslink, um den Benutzer zu warnen, wenn Sie zur nächsten Seite wechseln, wird die Checkboxauswahl verloren gehen. aber das Problem ist, dass Klick-Funktion nur einmal ausgeführt wird, nachdem es nicht ausgeführt wird. Hier ist mein WebGrid Code:

<div id="gridDiv"> 
     @{ 
      var grid = new WebGrid(Model, rowsPerPage: 5, canPage: true, canSort: true, ajaxUpdateContainerId: "gridDiv"); 
      @grid.GetHtml(); 
     } 
</div> 

und Paginierung Klickfunktion Code

$("table tr a").on('click', function() { 
    if (confirm("Your checkbox selection will be lost. Do you want to continue?")) 
     return true; 
    else 
     return false; 
}) 

Also, wenn die Seite geladen wird zum ersten Mal den Benutzer warnen, aber zweiten Mal in diesem Klick-Funktion ausführen nicht. Auch ich habe einen Debugger installiert, in diesem Fall kann ich ihn auch nur einmal debuggen. bitte hilf mir.

Answer 1

Die Art und Weise, wie Ihre Ereignisse registriert werden, prüft jQuery die Seite nach Elementen, die mit Ihrem Selektor übereinstimmen (table tr a) und Ihre Funktion dem Klickereignis für diese Elemente hinzufügt. Wenn Sie paginieren, werden diese Elemente aus dem DOM entfernt und durch neue ersetzt, und Ihr Code wird nicht erneut ausgeführt, um Ereignishandler für diese neuen Elemente zu registrieren.

Damit Sie sich keine Sorgen darüber machen müssen, diesen Code immer dann erneut auszuführen, wenn sich das DOM ändert (was dazu führen kann, dass Event-Handler zweimal oder öfter hinzugefügt werden). Sie können $(document).on() verwenden, die die Ereignis-Bubbling nutzt, um das richtige Ereignis basierend auf dem Element zu verwenden, auf das geklickt wurde.

Sie Code würde:

$('body').on('click', "table tr a", function() { 
    if (confirm("Your checkbox selection will be lost. Do you want to continue?")) 
     return true; 
    else 
     return false; 
}) 

Der Hörer ist jetzt auf dem Dokument und alle Elemente, die das Ereignis ausgelöst wird hinzugefügt bekommen.

Answer 2

Ich habe das auch versucht, aber immer noch nicht funktioniert. Da @Schleis sagte, dass JavaScript die Ereignisbindung nach dynamisch hinzugefügtem Inhalt verliert, verbinde ich dieses Ereignis mit der AjaxStop-Funktion und es funktioniert gut.

Code: -

$(document).ready(function() { 
     $(document).ajaxStart(function() { 
      $("#loader").show(); 
     }).ajaxStop(function() { 
      $("#loader").hide(); 
      conf(); 
     }) 
     // var a = setInterval(conf, 2000); 

     conf(); 
    }) 


    function conf() 
    { 
     $("table tr a").click(function() { 
      if (confirm("Your checkbox selection will be lost. Do you want to continue?")) 
       return true; 
      else 
       return false; 
     }) 
     //  alert("hi"); 
    }