[英]on('click') jQuery does not work after 1st page in jQuery datatable
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.
所选记录的ID存储在一个隐藏的跨度中。
When the delete button is selected on the 1st page of the datatable it is firing the onClick fine. 当在数据表的第一页上选择删除按钮时,将触发onClick罚款。 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.
问题是,如果我转到数据表第1页之后的任何页(例如第2页),然后单击Delete按钮,它什么也不做,它只是刷新页面。 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: 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. 请协助我如何使jQuery数据表的第一页之后的删除按钮起作用。 Thank you.
谢谢。
Your HTML is being dynamically replaced, which the handler on document.ready
can't pick up. 您的HTML正在被动态替换,
document.ready
上的处理程序无法使用。 You will need to use the delegating variant of on()
instead: 您将需要使用
on()
的委派变体 :
$('body').on('click', '[id*=btnDelete]', function() { ...
Side note: as @Wanton aptly mentioned it is preferable to not bind event handlers to 'body' if avoidable. 旁注:正如@Wanton恰当地提到的那样,最好避免将事件处理程序绑定到“ body”(如果可以避免的话)。 If there is a wrapper element that will not be dynamically replaced, you should use it to bind the event to instead.
如果存在不会动态替换的包装器元素,则应使用它来绑定事件。
$('[id*=btnDelete]')
finds all elements currently in page and bounds click to them. $('[id*=btnDelete]')
查找当前在页面中的所有元素,并单击它们。 So after you change page those new btnDelete buttons don't have click event attached to them. 因此,在更改页面后,这些新的btnDelete按钮没有附加单击事件。 Wrap your grid with div and give it an id like "gvScheduleWrapper" and do event binding like this to use event delegation.
用div包裹网格,并给它一个像“ gvScheduleWrapper”的ID,并像这样进行事件绑定以使用事件委托。
$(document).ready(function () {
$("#gvScheduleWrapper").on("click", "[id*=btnDelete]", function () {
// You delete handling code here
});
});`
You can use like this also for effective way. 您也可以这样使用有效方式。
$("#gvSchedule").on('click', '[id*=btnDelete]', function() {
//here goes your code
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.