分页点击事件只执行一次

Question

我有一个启用 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;
})

因此，当页面第一次加载时，它会警告用户，但第二次点击功能没有执行。 即使我也放置了一个调试器，在这种情况下我也只能调试一次。 请帮帮我。

Answer 1

我也试过了，但还是不行。正如@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");
    }

Answer 2

您注册事件的方式是，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;
})

监听器现在在文档上，任何被添加的元素都会触发事件。