如何检查函数是否被触发了jQuery

Question

我的项目中有一条警告消息，如果最终用户在保存表单之前关闭窗口，我们会警告他们。 它可以正常工作，但是即使他们保存了表单并尝试退出，它也可以触发。 我希望仅当用户在保存表单之前尝试退出时才弹出此警告消息。 我该怎么办？

下面是弹出警告消息的代码。

jQuery(window).bind('beforeunload', function (e) {

    var message = "You have attempted to leave this page. Your information will be lost. Please submit before exiting the page. Are you sure you want to exit this page?";
    e.returnValue = message;
    return message;

}）;

这是我的保存功能

save: function (e) {
        e.preventDefault();

        var that = this;

        that.Height = that.HeightFeet * 12 + that.HeightInches;
        that.UrinationFrequencyMinutes = that.UrinationFrequencyHours * 60 + that.UrinationFrequencyMins;

        var modelData = kendo.stringify(that);

        $.ajax({
            type: "POST",
            url: constants.serviceUrl + "Form/Create/",
            data: modelData,
            dataType: "json",
            contentType: "application/json; charset=utf8",
            beforeSend: function (xhr) {
                $("#loadingBackground").show();
                $("#loaderContainer").show();
            }
        })
        .success(function (e) {
            var test = e;
            that.set("SaveCompleted", true);
            that.set("SaveSucceeded", true);
        })
        .fail(function (e) {
            var test = e;
            that.set("SaveCompleted", true);
            that.set("SaveSucceeded", false);
        })
        .done(function (e) {
            var test = e;
            $("#loadingBackground").hide();
            $("#loaderContainer").hide();
        });

    },

帮助赞赏！ :)

Answer 1

当用户保存表单时，将变量“ saved”保存为“ true”，并在显示错误消息之前检查该变量。

Answer 2

您需要某种脏标志（并在onbeforeunload检查）。

一个非常基本的例子：

 (function(window,$,undefined){ var hasUnsavedChanges = false, $form = $('form'), $status = $('#form-status'); $form.find(':input').on('keypress change',function(){ hasUnsavedChanges = true; $status.text('Unsaved Changes'); }).end() .on('submit',function(){ hasUnsavedChanges = false; $status.text('Changes Saved.'); return false; }); $(window).on('beforeunload',function(){ if (hasUnsavedChanges){ return 'Save your work first!' } }); })(window,jQuery); 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="row"> <div class="col-xs-8"> <h3>Your Profile</h3> <form> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" placeholder="Your name"/> </div> <div class="form-group"> <label for="email">Email Address</label> <input type="email" class="form-control" placeholder="Your Email"/> </div> <button type="submit" class="btn btn-default">Save</button> <span id="form-status"></span> </form> </div> <div class="col-xs-4"> <h4>Favorite Links</h4> <ul class="list-group"> <li class="list-group-item"> <a href="http://StackOverflow.com/">StackOverflow</a> </li> </ul> </div> </div> 

Answer 3

保存成功后，将全局变量is_saved设置为true，并在更改表单中的内容后立即将其恢复为false。

这样，您可以检查信息是否已经保存。

Answer 4

最简单的解决方案是设置一个变量，例如在保存时将isSaved为true ，然后在显示警告之前进行检查。

更好的方法是还检查是否修改了任何表单字段，以便在没有任何更改的情况下不提示用户保存（浪费时间往返服务器/数据库只是为了保存完全相同的记录）。 您可以通过在$（document）.ready（）中缓存每个表单字段的值来实现。 然后，在beforeunload中，除了检查isSaved ，您还可以检查表单字段的各个值以查看它们是否与缓存的值不同。

Answer 5

对isSaved使用变量

    jQuery(window).bind('beforeunload', function (e) {
     if(isSaved){
        var message = "You have attempted to leave this page. Your information will be lost. Please submit before exiting the page. Are you sure you want to exit this page?";
        e.returnValue = message;
        return message;
}
    });