分頁單擊事件僅執行一次

Question

我已經啟用了ajax分頁的Webgrid，因此基本上在該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");
    }