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

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