on('click') jQuery does not work after 1st page in jQuery datatable

Question

I have a datatable with records. As part of the records there is a dynamic delete button to delete the selected record. The ID of the selected record is stored in a span which is hidden.

When the delete button is selected on the 1st page of the datatable it is firing the onClick fine. The problem is if I go to any page after the 1st page on the datatable (for example page 2) and click the delete button, it does not do anything, it just refreshes the page. Note that this only happens after the 1st page within the datatable.

Here is my code:

<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;
        }

    });
});

Please assist me how I can make the delete button work after the 1st page of the jQuery datatable. Thank you.

Answer 1

Your HTML is being dynamically replaced, which the handler on document.ready can't pick up. You will need to use the delegating variant of on() instead:

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

Side note: as @Wanton aptly mentioned it is preferable to not bind event handlers to 'body' if avoidable. If there is a wrapper element that will not be dynamically replaced, you should use it to bind the event to instead.

Answer 2

$('[id*=btnDelete]') finds all elements currently in page and bounds click to them. So after you change page those new btnDelete buttons don't have click event attached to them. Wrap your grid with div and give it an id like "gvScheduleWrapper" and do event binding like this to use event delegation.

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

Answer 3

You can use like this also for effective way.

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