on ('click') jQuery не работает после 1-й страницы в jQuery datatable

Question

У меня есть данные с записями.В составе записей есть кнопка динамического удаления для удаления выбранной записи.Идентификатор выбранной записи сохраняется в диапазоне, который скрыт.

Когда кнопка удаления выбрана на 1-й странице таблицы данных, запускается штраф onClick.Проблема в том, что если я захожу на любую страницу после 1-й страницы таблицы данных (например, на странице 2) и нажимаю кнопку удаления, она ничего не делает, она просто обновляет страницу.Обратите внимание, что это происходит только после 1-й страницы таблицы данных.

Вот мой код:

<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

$('[id*=btnDelete]') находит все элементы в данный момент на странице и ограничивает их щелчком.Поэтому после изменения страницы эти новые кнопки btnDelete не имеют прикрепленного события клика.Оберните свою сетку div и присвойте ей идентификатор, например "gvScheduleWrapper", и сделайте привязку к событию следующим образом, чтобы использовать делегирование события.

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

Answer 2

Вы можете использовать это также для эффективного способа.

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

Answer 3

Ваш HTML-код динамически заменяется, что обработчик на document.ready не может получить.Вам нужно будет использовать делегирующий вариант on() вместо:

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

Примечание: как метко заметил @Wanton, предпочтительно не привязывать обработчики событий к 'body', еслиможно избежать.Если есть элемент-обертка, который не будет динамически заменен, вы должны использовать его, чтобы вместо этого связать событие.