wake-up-neo.net

JQuery.on ("click") funktioniert in DataTables 2nd Page oder Zeilen nach 11 nicht

Ich habe einen jQuery-Link, der in einer dynamischen Liste für jede Zeile ausgeführt wird, wenn auf den Hyperlink geklickt wird.

Dies funktioniert vor der Anwendung von Datentables. Sobald jedoch Datatables angewendet werden, wird die 11. Zeile (nachdem die Anzeige auf einen höheren Wert als 10 geändert wurde) oder auf einer anderen Seite die jQuery nicht mehr aufgerufen.

Ich habe versucht, dies in einem jsFiddle zu werfen, und es funktioniert dort, daher kann ich es aus irgendeinem Grund nicht in einem jsFiddle reproduzieren.

Jeder Hinweis in die richtige Richtung wäre sehr dankbar.

PHP:

echo "<table id='paginatedTable'>";
echo "<thead><th>Test1</th><th>Test2</th></thead><tbody>";
foreach($array as $arr){
 echo "<tr><td>" . $arr['test1'] . "</td><td><div class='test'>";
 echo "<a href='#' class='toggleTest' data-id='". $arr['id']."' id='test-" . $arr['id'] . "'>" . $arr['test2'] . "</a>";
 echo "</div></td></tr>";
}
echo "</tbody></table>";

jQuery

$(function(){
    $('.test').on('click', '.toggleTest', function(e){
        var id = $(this).data('id');
        $("#test-"+id).html("Done");
        return false;
    });
});

$(document).ready(function() {
    $('#paginatedTable').dataTable();
} );
javascriptphpjqueryhtmldatatables
22
Andrew

Sie müssen den Handler an ein statisches Element binden, nicht an die Zeilen, die dynamisch hinzugefügt werden können. So sollte es sein:

$("#paginatedTable").on("click", ".test .toggleTest", function ...);
41
Barmar

Ich habe die Antwort von @Barmar verfolgt.

zusammen mit dem habe ich die on click in die document.ready-Funktion eingepackt, dann hat es für mich funktioniert.

$(document).ready(function() {

$('#dmtable tbody').on( 'click', 'tr td.details-control', function () {

}
} );
4
Raghu

Eine weitere einfache Lösung, die ich gerade gefunden gefunden habe, besteht darin, einfach eine Funktion hinzuzufügen, die ein Komponentenhandler verwendet, um das DOM für jedes DataTables-Neuzeichnen zu aktualisieren.

Kann verwendet werden wie: 

$(document).ready(function(){
    var table = $('#table-1').DataTable({ 
        "fnDrawCallback": function( oSettings ) {
            componentHandler.upgradeDOM();
        }
    });
});

Meine Paginierungsprobleme wurden behoben, als ich ein Dropdown-Menü in einer der Spalten verwendete.

2
David Hagan

Hier können einige Dinge schief gehen:

  • Ihre Ereignisbindung bezieht sich auf Elemente, die ersetzt werden. Sie sollten Folgendes verwenden:
    $('#paginatedTable').on('click', '.toggleTest', function(e){
  • Sie scheinen Ihrem HTML-Code nicht zu entkommen, sodass die Daten ihn möglicherweise beschädigen könnten:
    htmlspecialchars($arr['test2'])
    (statt nur $arr['test2'], könnte auch für andere Variablen gelten)
0
jeroen