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

您正在注册事件的方式，jQuery正在检查页面中是否有与您的选择器（table tr a）匹配的元素，并将您的函数添加到这些元素的click事件中。当您进行分页时，这些元素将从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;
})

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

Answer 2

我也尝试过，但仍然无法正常工作。正如@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");
    }

分页点击事件仅执行一次

2 个答案: