c# - on('click')jQuery在jQuery datatable的第一页之后不起作用

我有一个带有记录的数据表。作为记录的一部分，有一个动态删除按钮可删除所选记录。所选记录的ID存储在一个隐藏的跨度中。

当在数据表的第一页上选择删除按钮时，将触发onClick罚款。问题是，如果我转到数据表的第一页之后的任何页面（例如第2页），然后单击“删除”按钮，它什么也不做，它只是刷新页面。请注意，这仅在数据表的第一页之后发生。

这是我的代码：

<asp:GridView ID="gvSchedule" runat="server" AutoGenerateColumns="false" class="table table-sm table-condensed table-bordered table-hover" ClientIDMode="Static" DataKeyNames="ScheduleID" OnRowCommand="gvSchedule_RowCommand">
    <Columns>
        <asp:BoundField DataField="CenterName" HeaderText="CenterName" SortExpression="CenterName" />
        <asp:BoundField DataField="EPType" HeaderText="Software" SortExpression="EPType" />
        <asp:BoundField DataField="FirstName" HeaderText="Resource" SortExpression="FirstName" />
        <asp:BoundField DataField="Date" HeaderText="Date" DataFormatString="{0:dd/MMM/yyyy}" SortExpression="Date" />
        <asp:BoundField DataField="StartTime" HeaderText="StartTime" SortExpression="StartTime" />
        <asp:BoundField DataField="EndTime" HeaderText="EndTime" SortExpression="EndTime" />
        <asp:BoundField DataField="EventDescription" HeaderText="Event" SortExpression="EventDescription" />
        <asp:BoundField DataField="InstallMethod" HeaderText="Install Method" SortExpression="InstallMethod" />
        <asp:BoundField DataField="InstallationComplete" HeaderText="Status" SortExpression="InstallationComplete" />
        <asp:TemplateField HeaderText="Action">
            <ItemTemplate>
                <span id="ScheduleID" style="display: none"><%# Eval("ScheduleID") %></span>
                <asp:ImageButton ID="btnViewSchedule" ImageUrl="~/assets/images/edit.png" Style="width: 20px; height: 18px;" runat="server" CommandArgument='<%#Eval("ScheduleID") + ";" +Eval("CenterID")%>' CommandName="selectrow" />
                <asp:ImageButton ID="btnDelete" ImageUrl="~/assets/images/delete.png" Style="width: 20px; height: 18px;" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

jQuery的：

$(document).ready(function () {
    $('[id*=btnDelete]').on("click", function () {
    var ScheduleID = $(this).closest('tr').find('span').text();

        if (confirm("Are you sure you would like to delete the selected schedule?")) {
            $.ajax({
                type: "POST",
                url: "ScheduleOverview.aspx/DeleteSchedule",
                data: "{'ScheduleID': '" + ScheduleID + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    swal("Information", "Schedule Successfully Deleted", "success");
                },
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
        else {
            return false;
        }

    });
});

请协助我如何使jQuery数据表的第一页之后的删除按钮起作用。谢谢。

最佳答案

您的HTML正在被动态替换，document.ready上的处理程序无法获取。您将需要使用delegating variant of on()代替：

$('body').on('click', '[id*=btnDelete]', function() { ...

旁注：正如@Wanton恰当地提到的那样，最好避免将事件处理程序绑定到“ body”（如果可以避免的话）。如果存在不能动态替换的包装器元素，则应使用它来绑定事件。

关于c# - on('click')jQuery在jQuery datatable的第一页之后不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53613347/