Jquery 离开页面前未保存更改提醒

Question

我有一个 jquery 对话框，它有一些 Kendo 文本框、下拉列表和组合框。如果用户进行了更改，我希望它在关闭带有未保存更改的对话框之前警告用户。当我进行一些更改并尝试关闭模式时，它目前确实会发出警告。但问题是，如果我什至更改一个文本框并单击其他文本框进行编辑，它就会一直发出警告。我只希望它在用户完成修改并尝试关闭对话框时只警告一次。

这是我的代码

    $('.ui-button').mousedown(function () {
        if ($(":input").change(function (e) {
            var dirtyFlagMsg = confirm('Are you sure you want to close without saving?');
            if (dirtyFlagMsg == true) {
                $("#popUpEdit").dialog("close");
                $("#popUpNew").dialog("close");
            }
            else e.preventDefault();
        }));
    });

Answer 1

onbeforeunload 事件将帮助您询问用户是否要离开页面。

function myFunction() {
  return"";
}

<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>TRY CLICK LINK</p>

<a href="https://www.google.com"> go to another page</a>

</body>
</html>

Answer 2

首先，您混合了梨和苹果，jquery dialog 和 onbeforeunload 是两种不同的东西。我认为您想关闭对话框而不是 window （问题标题具有误导性）。

您不需要跟踪每个 mousedown 事件，您需要在关闭事件之前在对话框上调用函数。

在对话框的beforeClose事件中检查是否有脏字段，如果有脏字段弹出确认信息，否则return为真，对话框将调用关闭事件。

像这样（未测试）：

$("#dialog").dialog({
   beforeClose: function(){
     var isDirty = //logic for dirty check of inputs
     if(isDirty){
        if(confirm("Are you sure you want to close without saving?")){
            return true;
        } else {
            return false;
        }
     }

     return true;
   }
});

当然，我使用的是普通浏览器确认，因此您需要使用自己的逻辑进行对话确认。希望对您有所帮助！

Jquery 离开页面前未保存更改提醒

Jquery before leave the page unsaved changes alert

javascript

asp.net-mvc

jquery

kendo-ui

kendo-asp.net-mvc