在卸载前检测表单更改？答案

【问题标题】：Detecting form changes on beforeunload?在卸载前检测表单更改？
【发布时间】：2012-09-26 18:40:53
【问题描述】：

这已经被问过了，我知道，但我不明白为什么这对我不起作用。

尝试检测表单更改，如果用户尝试离开，我希望他们确认他们将丢失更改...

var dirty = false;
$("form#add_item :input").change(function() {
    dirty = true;
});

$("window").on('beforeunload', function() {
    if (dirty) {
        return 'You have unsaved changes! If you leave this page, your changes will be lost.';
    }

});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您需要直接在window 对象上设置onbeforeunload 的事件处理程序：

var dirty = false;
$("form#add_item :input").change(function() {
    //alert("form changed!")
    dirty = true;
});

window.onbeforeunload = function() {
    if (dirty) {
        return 'You have unsaved changes! If you leave this page, your changes will be lost.';
    }
};

工作示例：http://jsfiddle.net/M9tnP/20/

【讨论】：

您是否先编辑了文本框？我也在使用 Chrome 21。
当您单击“离开页面”时，请记住它会将您重定向到旧的 jsFiddle 修订版。您需要确保您正在查看修订版 18 jsfiddle.net/M9tnP/18
这不是真的：“您需要直接在窗口对象上设置 onbeforeunload 的事件处理程序”。 $(window).on('beforeunload', function() {...})（不带引号）工作正常，比分配window.onbeforeonload 更可取，因为现在有几个可以订阅beforeonload 事件！
一个小提示——也许你不在乎：当心beforeunload doesn't work on iOS。

【解决方案2】：

你需要：

$(window).on('beforeunload', function() {...})

，不是：

$("window").on('beforeunload', function() {...})

（window 周围没有引号）。 $(window) 将 window javascript 变量包装在一个 jQuery 对象中，其中 $("window") 选择页面上的所有 <window> 标签，其中正好有 0 个。

（大多数时候。实际上你可以使用$('body').append('<window></window>')，然后$("window") 匹配那个新标签——但不要那样做。）

【讨论】：