离开页面前的 Jquery 未保存更改警报答案

【问题标题】：Jquery before leave the page unsaved changes alert离开页面前的 Jquery 未保存更改警报
【发布时间】：2020-06-11 01:57:45
【问题描述】：

我有一个 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();
        }));
    });

【问题讨论】：

能否请您发布您的html结构。
它只是以<div id="popUpEdit" title="Update Existing Information" style="display:none;">开头popUpEdit是模态的，它包括很多@(Html.Kendo().TextBox()和combobox、dropdownlists等等。
我只使用 id="popUpEdit" 在 jQuery 中处理所有内容。所以我认为在 html 中做某事无济于事

标签： javascript jquery asp.net-mvc kendo-ui kendo-asp.net-mvc

【解决方案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>

【讨论】：

是的，它是窗口事件，字符串“”什么都不是。你可以添加一些逻辑来代替return。
好的，为什么你必须将 onbeforeunload 的值设置为：“return myFunction()”，而不仅仅是：“myFunction()”，以及如何做一个除了返回空字符串之外什么都不做的函数导致该消息出现？
好问题，我为您提供了可以获取有关此窗口事件信息的链接。 developer.mozilla.org/enUS/docs/Web/API/Window/…
对话框中显示的默认语句，“您确定要离开此页面吗？...按确定继续，或按取消留在当前页面。”,无法删除或更改。
据我所知，它就像 alert()、confirm() 和 prompt() 方法一样，无法设置样式。

【解决方案2】：

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

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

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

类似这样的东西（未测试）：

$("#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;
   }
});

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

【讨论】：