数据表分页使脚本代码无法正常工作

Question

首先我很抱歉，因为我知道人们以前遇到过这个问题，并且已经回答了很多次。 很抱歉，我不理解所给出的答案，因此需要就我的特定问题寻求建议。

我正在使用最新的 jQuery 和 dataTables 库，并且可以通过经典 ASP 获取我的数据来绘制表格。

问题出现在第 1 页之后的所有页面上（禁用分页使一切正常并不是理想的结果）。

我了解 dataTables 的工作方式是弄乱 DOM 中的 tr 以及我读过的其他帖子，使用 .on 可以解决这个问题，但这是我要解决的问题。

我的代码看起来像这样（我在这个页面上有多个选项卡式表格，因此有对话框按钮将数据复制到表单中的输入并提交）

    <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

对于任何感兴趣的人，我通过更改存储数据的方式以及对话框的生成方式来解决此问题。 上面的代码会生成一个新的对话框和脚本，以在每次从循环中插入新行时调用该对话框。

这样做的正确方法是为单元格 () 分配一个类，并在 span 元素中使用数据属性。示例：

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

现在 html 已正确标记，我在顶部有一个脚本块，它从单击的单元格调用属性，这可用于识别它，如下所示：

$("#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")
});