javascript - jquery window.onbeforeunload 不使用 href=javascript 函数

Question

我有下面的代码来使窗口卸载时的 session 无效

window.onbeforeunload = function(event) {
    if (typeof event == 'undefined') {
        event = window.event;
    }
    if (event) {
        console.log("closing the browser, invalidating the session");
        $.ajax({
            url : "/inValidateOnBrowserClose.html",
            type : "get",
            cache : false,
        }).done(function(data) {
            console.log(" invalidated session on browser close event");
        });

    }
    return true;
};

$(function() {
    $("a").click(function() {
        window.onbeforeunload = null;
    });
    $("button").click(function() {
        window.onbeforeunload = null;
    });

});

一切正常，但我有一个页面，其中有一个动态创建的按钮。

<span class="myButton"><a href="javascript:submitForm" >Update </a></span>

当我点击 anchor (按钮)上方时，我的窗口卸载事件被调用(在我的例子中它不应该被调用)，我很惊讶为什么 $("a").click(function()) 首先没有被调用，我正在尝试解决这个问题但没有运气。感谢您的回答

Answer 1

你需要像下面这样使用 delegate 将点击事件绑定(bind)到动态生成的元素:

$(function() {
    $(document).delegate("a","click",function() {
        window.onbeforeunload = null;
    });
    $(document).delegate("button","click",function() {
        window.onbeforeunload = null;
    });

});

这适用于已经存在的元素，因此无需编写单独的点击绑定(bind)。

对于 firefox 用户，delegate 功能可能不起作用，因此他们可以使用 on。请看下面的代码

$(function() {
        $("a").on("click",function() {
            window.onbeforeunload = null;
        });
        $("button").on("click",function() {
            window.onbeforeunload = null;
        });

    });

Stackoverflow Issue