在beforeunload之前检测表单更改?

时间:2012-09-26 18:40:53

标签: javascript jquery

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

http://jsfiddle.net/M9tnP/16/

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

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.';
    }

});

2 个答案:

答案 0 :(得分:6)

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

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/

答案 1 :(得分:0)

你需要:

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

,而不是:

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

window周围没有引号)。 $(window)window javascript变量包装在jQuery对象中,其中$("window")选择页面上的所有<window>标记,其中正好为0。

(大部分时间。事实上你可以$('body').append('<window></window>'),然后$("window")匹配新标签 - 但不要这样做。)