32

我有一小段代码：

<script>
$(window).bind('beforeunload', function() {
  $.ajax({
    async: false,
    type: 'POST',
    url: '/something'
    });
  });
</script>

我想知道，当用户点击提交按钮时，我怎么能禁用这个请求。

基本上就像这里一样，在SO上。当您提出问题并决定关闭页面时，您会收到一个警告窗口，但在您提交表单时不会发生这种情况。

4

7 回答 7

46

unbind使用beforeunload事件处理程序调用：

$('form#someForm').submit(function() {
   $(window).unbind('beforeunload');
});

要防止提交表单，请添加以下行：

   return false;
于 2011-01-24T22:37:08.450 回答
20

利用

$('form').submit(function () {
    window.onbeforeunload = null;
});

在你主要提交功能之前确保你有这个！（如有）

于 2013-06-20T19:08:57.657 回答
0

这就是我们使用的：

在文档准备好时，我们调用 beforeunload 函数。

$(document).ready(function(){
    $(window).bind("beforeunload", function(){ return(false); });
});

在任何提交或 location.reload 之前，我们取消绑定变量。

$(window).unbind('beforeunload');
formXXX.submit();

$(window).unbind("beforeunload"); 
location.reload(true);
于 2014-08-28T09:14:11.067 回答
0

我很好地寻找 Detect onbeforeunload for ASP.NET web application，如果使用带有母版页和内容页的 ASP.NET 页面上的某些输入控件发生更改，我必须显示警告消息。我在母版页上使用了 3 个内容占位符，最后一个在表单之后

<form runat="server" id="myForm">

所以在表单结束标记之后和正文结束标记之前使用了这个脚本

<script>
        var warnMessage = "Save your unsaved changes before leaving this page!";
        $("input").change(function () {
            window.onbeforeunload = function () {
                return 'You have unsaved changes on this page!';
            }
        });
        $("select").change(function () {
            window.onbeforeunload = function () {
                return 'You have unsaved changes on this page!';
            }
        });
        $(function () {
            $('button[type=submit]').click(function (e) {
                window.onbeforeunload = null;
            });
        });
    </script>

就绑定而言， beforeunload 不能以这种方式可靠地工作。您应该在本地分配它

所以我让它像这个绑定一样工作，并且取消绑定对我来说也不起作用随着 jQuery 1.7 之后的事件 API 已经更新，.bind()/.unbind() 仍然可以用于向后兼容，但首选方法是使用 on()/off() 函数。

于 2014-09-10T06:06:26.510 回答
0 
 <!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>

于 2015-10-20T12:36:56.487 回答
0

超级老问题，但可能对其他人有用。

简单地将“beforeunload”从“submit”事件中分离出来对我来说是行不通的——因为即使表单中存在用户必须修复的错误，也会调用提交处理程序。因此，如果用户尝试提交表单，然后收到错误，然后单击另一个页面，他们将能够在没有警告的情况下离开。

这是我的解决方法，似乎效果很好。

(function($) {

    var attached = false,
        allowed = false;

    // catch any input field change events bubbling up from the form
    $("form").on("change", function () {
        // attach the listener once
        if (!attached) {
            $("body").on("click", function (e) {
                // check that the click came from inside the form
                // if it did - set flag to allow leaving the page
                // otherwise - hit them with the warning
                allowed = $(e.target).parents("form").length != 0;
            });

            window.addEventListener('beforeunload', function (event) {
                // only allow if submit was called 
                if (!allowed) {
                    event.preventDefault();
                    event.returnValue = 'You have unsaved changes.';
                }

            });
        }                
        attached = true;
    });

}(jQuery));

这样，如果离开页面的点击源自表单内部（如提交按钮） - 它不会显示警告。如果离开页面的点击来自表单之外，那么它会警告用户。

于 2020-04-17T18:08:20.173 回答
0

如果您使用的是 bind 然后使用这个：

$('form').submit(function () {
    $(window).unbind('beforeunload');
});

这对所有表单提交都有好处。

于 2019-06-25T07:21:16.697 回答