Question

如何在单击提交按钮时阻止调用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!'; }

  });

 });

Answer 1

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

在文档中，添加脚本：

warn_on_unload = "You have unsaved changes!"

在提交事件中，添加：

warn_on_unload = "";

事件的定义，改为：

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

到warn_on_unload，您现在可以随意打开或关闭警告信息。

Answer 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;
            }   
        }
    });
});

Answer 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');
    });
}

Answer 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;
        }
    }
});
});

Answer 5

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

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

但是如果你想在离开页面之前监视表单更改和警报（确认框），那么我建议你插件这里是一个jquery插件，完全按照我所写的{{3 }}

插件Monitior在离开页面之前，您的表单会发生变化并发出警报

最佳部分＆＃34;当您点击提交按钮时，它不会显示警告框＆＃34;或者您提交表格

示例代码： -

<!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>

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

5 个答案: