datatables Paginierung bricht Skript-Code von der Arbeit

Question

Erstens entschuldige ich mich, wie ich weiß, Leute hatten dieses Problem zuvor und es wurde oft beantwortet. Es tut mir leid zu sagen, dass ich die Antworten, die gegeben wurden nicht verstehe, daher die Notwendigkeit, Beratung zu meinem speziellen Problem zu suchen.

Ich benutze die neueste jQuery und dataTables-Bibliothek und kann die Tabelle fein zeichnen, meine Daten über klassischen ASP erhalten.

Das Problem tritt auf allen Seiten nach Seite 1 auf (die Deaktivierung der Seitennummerierung bewirkt, dass alles funktioniert, ist nicht das erwünschte Ergebnis).

Ich verstehe, wie DataTables funktioniert, indem man mit den trs im DOM und von den anderen Posts, die ich gelesen habe, mit .on klarkommt, aber es ist, wo ich mich entkomme.

Mein Code sieht wie folgt aus etwas (ich habe mehrere Registerkarten Tabellen auf dieser Seite, also an die Eingänge in Form das Dialogtaste Kopieren der Daten mit und Absenden)

<script> 
$().ready(function(){ 
    $("#table1").dataTable(); 
}); 
    </script> 
      <table id="table1"> 
       <thead> 
        <tr> 
         <th>Name</th> 
         <th>Access Level</th> 
         <th>Last Edited</th> 
         <th>Last Edited By</th> 
         <th></th> 
        </tr> 
       </thead> 
       <tbody> 
        <% 
SQL="SELECT * FROM People_Levels ORDER BY accessLevel ASC, fName ASC;" 
set rs=MyConn.execute(SQL) 
set SQL=nothing 
do While not rs.EOF 
        %> 
        <tr> 
         <td><%=rs("fName")%>&nbsp;<%=rs("sName")%></td> 
         <td>Access Level <%=rs("accessLevel")%></td> 
         <td><%=rs("lastEdited")%></td> 
         <td><%=rs("lastEditedBy")%></td> 
         <td><span id='<%=rs("Key")%>'>Remove</span> 
          <div id="remove<%=rs("Key")%>" title="remove user access level"> 
           <div id="remove<%=rs("Key")%>content"> 
            Are you sure you want to remove <%=rs("fName")%>&nbsp;<%=rs("sName")%> from the access level list? 
           </div> 
           <div id="remove<%=rs("Key")%>saving" style="text-align: center; display: none"> 
            <strong style="color: green; font-size: 1em">Removing user from database</strong><br /> 
            <img src="CSS/images/Loading.gif" /> 
           </div> 
          </div> 
          <script> 
$().ready(function() { 
    $("#remove<%=rs("Key")%>").dialog({ 
     autoOpen: false, 
     height: 250, 
     width: 300, 
     modal: true, 
     buttons: { 
      "No": function() { 
       $(this).dialog("close"); 
      }, 
      "Yes": function() { 
       $("#select1").val("2"); 
       $("#select2").val(<%=rs("Key")%>); 
       $("#submit").trigger("click"); 
       $("#remove<%=rs("Key")%>content").hide(); 
       $("#remove<%=rs("Key")%>saving").show(); 
      } 
     } 
    }); 
    $("#<%=rs("Key")%>").click(function(){ 
     $("#remove<%=rs("Key")%>").dialog("open"); 
    }); 
}); 
          </script> 
         </td> 
        </tr> 
        <% 
rs.MoveNext 
loop 
set rs=nothing 
        %> 
       </tbody> 
      </table> 
    <form action="" method="post"> 
     <input id="submit" type="submit" name="submit" style="display: none" /> 
     <input id="select1" name="select1" style="display: none" /> 
     <input id="select2" name="select2" style="display: none" /> 
     <input id="select3" name="select3" style="display: none" /> 
     <input id="select4" name="select4" style="display: none" /> 
     <input id="select5" name="select5" style="display: none" /> 
     <input id="select6" name="select6" style="display: none" /> 
     <input id="select7" name="select7" style="display: none" /> 
    </form> 

Answer 1

Für alle Interessierten ich dieses Problem behoben durch Ändern der Art, wie ich die Daten gespeichert habe und wie der Dialog generiert wurde. Der obige Code erzeugte ein neues Dialogfeld und ein neues Skript, um dieses Dialogfeld jedes Mal aufzurufen, wenn eine neue Zeile aus der Schleife eingefügt wurde.

Die korrekte Vorgehensweise bestand darin, den Zellen() eine Klasse zuzuweisen und auch Datenattribute im span-Element zu verwenden. Beispiel:

<span class="cellClass" data-key="<%=rs("Key")%>">remove</span> 

Nun, da die html richtig oben markiert ich an der Spitze ein Script-Block haben, die die Eigenschaften der Zelle ruft geklickt und diese verwendet werden kann, um ihn zu identifizieren, etwa so:

$("#table1").on("click", ".cellClass",function(){ 
    // table1 is the nearest parent id to the cell 
    // cellClass is the classname given to the cell (this is an example) 
    var Key=$(this).attr("data-key"); 
    $("#Dialog").dialog("open") 
});