Warum Jquery Datatable initComplete/onInit-Ereignisse nicht funktionieren?

Question

Ich verwende Jquery Datatable in meinem Code. Ich lade die Daten über eine Ajax-Anfrage. Für jede in meiner Tabelle erstellte Zeile gibt es eine Schaltfläche namens delete. Das On-Click-Ereignis dieser Schaltfläche liest ein Attribut namens "r_id" und wendet dann eine Soft-Löschung in meiner Datenbank an. Mein Code ist wie folgt aus:

$(document).ready(function() { 
var parity = 3; 
var tr = ""; 
$.ajax({ 
     url: "https://" + window.myLocalVar + "/api/rewards/findAllRewardsByStatusID/" + parity, 
     type: "GET", 
     dataType: 'json', 
     contentType: 'application/json', 
     success: function (rewards) { 
      if (rewards.length > 0) { 
       for (var i = 0; i < rewards.length; i++) { 
        var reward = rewards[i].Reward; 
        var reward_price = "$ " + rewards[i].Price; 
        var r_id = rewards[i].RewardID; 
        tr += '<tr r_id="' + r_id + '">\ 
         <td>' + reward + '</td>\ 
         <td>' + reward_price + '</td>\ 
         <td>\ 
          <button r_id="' + r_id + '" type="button" class="btn btn-danger delete">delete</button>\ 
         </td>\ 
        </tr>'; 
        if (i % 10 == 0 || i == rewards.length - 1) { 
         $("#submitted_rewards > tbody").append(tr); 
         tr = ""; 
        } 
       } 
      } 
      $('#submitted_rewards').on('init.dt', function() { 
       // click event for each tr 
       $("#submitted_rewards tbody tr td:not(:last-child)").on("click", function() { 
        var r_id = $(this).parent().attr("r_id"); 
        window.location.href = "./reward-info.aspx?id=" + r_id; 
       }); 

       $(".delete").click(function() { 
        var r = $(this).attr("r_id"); 
        $("tr[r_id=" + r + "]").fadeOut(); 
       }); 
      }).DataTable({ 
       "scrollX": true, 
       stateSave: true 
      }); 

     }, 
     error: function (err) { 
      if (err) { 
       console.log(err); 
      } 
     } 
    }); 
}); 

Dieser Code lädt die Daten in meiner Jquery Datentabelle namens "submitted_rewards" richtig. Die Seitengröße der Tabelle ist standardmäßig auf 10 eingestellt (10 Zeilen pro Seite). Jetzt habe ich versucht, auf die zweite Seite zu gehen und auf die Zeile zu klicken, um zu einer anderen Seite umzuleiten, ODER, wenn ich versuchte, auf die Löschen-Schaltfläche zu klicken, um eine Zeile zu löschen, und es hat nicht funktioniert! Diese Ereignisse funktionieren nur für die Seite, auf der ein Benutzer das erste Mal landet. Ich speichere den Zustand der Tabelle, der bedeutet, wenn ich von Seite 1 auf Seite 2 wechselte, dann habe ich diese Seite aktualisiert. Die Ereignisse jeder Zeile auf Seite 2 funktionieren nur.

Ich habe versucht, das Ereignis initComplete zu verwenden, aber es hat nicht funktioniert. Irgendeine Idee, wie man dieses Problem löst.

Danke!

Answer 1

Wenn Sie Handler an DOM-Elemente anhängen und diese DOM-Elemente zerstört werden, haben Ihre Handler keine Wirkung mehr, und der zugehörige Code wird zu einem bestimmten Zeitpunkt unbrauchbar.

Wenn Sie Seiten wechseln, indem Sie window.location.href = ... tun, ersetzen Sie effektiv Ihre DOM-Elemente (und das Skript) durch eine neue Gruppe von der Seite, die sie ersetzt. Folglich werden sich Ihre Handler nicht mehr bewerben.

Sie können dies auf mehrere Arten ansprechen.

1) Sie müssen zu jeder geladenen Seite ein Skript hinzufügen und es ausführen lassen, wenn das DOM bereit ist, indem Sie Handler auf die DOM-Elemente auf dieser Seite anwenden.

2) Führen Sie eine weitere Ajax-Anfrage durch, um neue Daten zu erhalten und bestimmte Elemente auf Ihrer Seite zu ersetzen. Verwenden Sie jDelery (.delegate()), um Handler automatisch bestimmten Elementen zuzuordnen, auch wenn Sie sie später hinzufügen.

Answer 2

Der Grund, warum es nicht funktioniert, weil ich alle 10 Zeilen an die Tabelle angehängt habe. Ich habe alle Zeilen der Tabelle auf einmal hinzugefügt und dann die klickenden Ereignisse, dann wird es funktionieren. Wenn ich alle 10 Zeilen laden möchte. dann muss ich die Ereignisse innerhalb der if-Anweisung wie folgt verschieben:

if (i % 10 == 0 || i == rewards.length - 1) { 
    $("#submitted_rewards > tbody").append(tr); 
    tr = ""; 
    $("#submitted_rewards tbody tr td:not(:last-child)").on("click", function() { 
     var r_id = $(this).parent().attr("r_id"); 
     window.location.href = "./reward-info.aspx?id=" + r_id; 
    }); 

    $(".delete").click(function() { 
     var r = $(this).attr("r_id"); 
     $("tr[r_id=" + r + "]").fadeOut(); 
    }); 
}