on（'click'）jQuery在jQuery datatable的第一页之后不起作用

Question

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

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

这是我的代码：

<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数据表的第一页之后的删除按钮起作用。 谢谢。

Answer 1

您的HTML正在被动态替换， document.ready上的处理程序无法使用。 您将需要使用on()的委派变体 ：

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

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

Answer 2

$('[id*=btnDelete]')查找当前在页面中的所有元素，并单击它们。 因此，在更改页面后，这些新的btnDelete按钮没有附加单击事件。 用div包裹网格，并给它一个像“ gvScheduleWrapper”的ID，并像这样进行事件绑定以使用事件委托。

$(document).ready(function () {
    $("#gvScheduleWrapper").on("click", "[id*=btnDelete]", function () {
      // You delete handling code here 
    });
});`

Answer 3

您也可以这样使用有效方式。

$("#gvSchedule").on('click', '[id*=btnDelete]', function() {
    //here goes your code
});