我有一个支持ajax分页的Webgrid，所以基本上在webgrid中，我在最后一列中有复选框，每当用户选择任何复选框并尝试使用分页链接导航到第二页时，我调用分页链接上的单击函数来警告用户，如果您导航到下一页，您的复选框选择将丢失。但问题是，click函数只执行一次，之后就不执行了。下面是我的webgrid代码：
<div id="gridDiv">
@{
var grid = new WebGrid(Model, rowsPerPage: 5, canPage: true, canSort: true, ajaxUpdateContainerId: "gridDiv");
@grid.GetHtml();
}
</div>和分页点击函数代码
$("table tr a").on('click', function () {
if (confirm("Your checkbox selection will be lost. Do you want to continue?"))
return true;
else
return false;
})因此，当页面第一次加载时，它会警告用户，但第二次不会执行这个click函数。甚至我也放了一个调试器，在这种情况下我也只能调试它一次。请帮帮我。
回答 2
Stack Overflow用户
发布于 2017-06-21 18:25:01
按照注册事件的方式，jQuery会检查页面中是否有与选择器(table tr a)匹配的元素，并将函数添加到这些元素的单击事件中。分页时，这些元素将从DOM中删除并替换为新元素，并且您的代码不会再次运行以注册这些新元素上的事件处理程序。
这样，您就不必担心在DOM发生更改时重新运行此代码(这可能会导致事件处理程序被添加两次或多次)。您可以使用$(document).on()，它将利用事件冒泡来根据所单击的元素使用正确的事件。
你的代码会变成：
$('body').on('click', "table tr a", function () {
if (confirm("Your checkbox selection will be lost. Do you want to continue?"))
return true;
else
return false;
})侦听器现在位于文档上，添加的任何元素都将触发事件。
Stack Overflow用户
发布于 2017-06-22 02:53:31
我也试过了，但还是不起作用。正如@Schleis所说的，javascript在动态添加内容后丢失了事件绑定，我正在AjaxStop函数上重新绑定该事件，它工作得很好。
代码：-
$(document).ready(function () {
$(document).ajaxStart(function () {
$("#loader").show();
}).ajaxStop(function () {
$("#loader").hide();
conf();
})
// var a = setInterval(conf, 2000);
conf();
})
function conf()
{
$("table tr a").click(function () {
if (confirm("Your checkbox selection will be lost. Do you want to continue?"))
return true;
else
return false;
})
// alert("hi");
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44683306
复制相关文章
腾讯云开发者
