单击提交按钮时如何防止调用onbeforeunload答案

【问题标题】：How to prevent onbeforeunload from being called when clicking submit button单击提交按钮时如何防止调用onbeforeunload
【发布时间】：2010-12-30 17:31:59
【问题描述】：

如何防止在单击提交按钮时调用 onbeforeunload？

$(document).ready(function() 
 {
  $('input:text,input:checkbox,input:radio,textarea,select').one('change', function() 
  {
   //('BODY').attr('onbeforeunload',"return 'Leaving this page will cause any unsaved data to be lost.';");
   if(
   window.onbeforeunload = function() { return 'You have unsaved changes!'; }

  });

 });

【问题讨论】：

标签： jquery user-interface dialog

【解决方案1】：

无法阻止unbeforeunload的调用，但是使用全局标志变量，可以控制是否显示警告。

在文档中，添加脚本：

warn_on_unload = "You have unsaved changes!"

在提交事件中，添加：

warn_on_unload = "";

事件的定义，改为：

window.onbeforeunload = function() { return warn_on_unload; }

通过warn_on_unload，您现在可以随意打开或关闭警告消息。

【讨论】：

如何添加模糊，在这个 $('input:text,input:checkbox,input:radio,textarea,select').one('change', function() 中按键
这是一个不同的问题，您最好为此打开一个新问题。
不需要flag，可以使用window.unbeforeunload作为flag。在change事件中将函数赋值给window.unbeforeunload，在submit事件中给对象赋值为null。

【解决方案2】：

这是最终代码：

$(document).ready(function() 
{
    var warn_on_unload="";
    $('input:text,input:checkbox,input:radio,textarea,select').one('change', function() 
    {
        warn_on_unload = "Leaving this page will cause any unsaved data to be lost.";

        $('#submit').click(function(e) { 
            warn_on_unload = "";}); 

            window.onbeforeunload = function() { 
            if(warn_on_unload != ''){
                return warn_on_unload;
            }   
        }
    });
});

【讨论】：

对这个 +1 真的很满意

【解决方案3】：

可以使用.on()绑定onbeforeunload，然后在表单提交中使用.off()解绑，短小精悍

$(document).ready(function () {
    $(window).on('beforeunload', function(){
        return "You have unsaved changes!";
    });
    $(document).on("submit", "form", function(event){
        $(window).off('beforeunload');
    });
}

【讨论】：

【解决方案4】：

修改：现在忽略表单提交

$(document).ready(function () {
var warn_on_unload = "";
$('input:text,textarea').on('change', function () {
    warn_on_unload = "Leaving this page will cause any unsaved data to be lost.";
    $("form").submit(function () {
        warn_on_unload = "";
    });
    window.onbeforeunload = function () {
        if (warn_on_unload != '') {
            return warn_on_unload;
        }
    }
});
});

【讨论】：

【解决方案5】：

如果您只想在提交按钮上禁用 Onbeforeunload 事件。所以这里有一个示例代码

document.getElementById('sub').onsubmit = function(e) {
 window.onbeforeunload = null;
 return true;
}

但是，如果您想在离开页面之前监视表单更改和警报（确认框）用户，那么我会向您建议插件这里是一个 jquery 插件，它完全符合我所写的 https://github.com/snikch/jquery.dirtyforms

插件监控您的表单在离开页面前发生变化并发出警报

最好的部分“当你点击提交按钮时它不会显示警告框”或者你提交你的表单

示例代码：-

<!DOCTYPE html>
 <html>
  <head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.dirtyforms/2.0.0-beta00006/jquery.dirtyforms.min.js"></script>

  <script type="text/javascript">
    $(function() {
        $('#form_verify').dirtyForms();
    })
  </script>

  <title></title>
 <body>
<form id="form_verify" action="a.php" method="POST">
    Firt Name <input type="text">
    Last Name <input type="file">
    <input type="submit">   
</form>

【讨论】：

当你点击提交按钮时它会显示警告框。 :-(