在Firefox和IE中提交后处理的beforeunload的removeEventListener

时间:2013-12-26 17:10:31

标签: javascript jquery html

我被要求实施一项功能......

  1. 在更改表单元素之前,网页已禁用“操作”按钮。
  2. 当用户启动时,网页会发出警告消息,而当有未保存的更改时,该网页将离开该页面。
  3. 点击提交按钮,启用后,应该正常提交(不应显示弹出警告)
  4. 以下是解决方案中使用的代码示例。 hasChanged变量控制是否可以在有或没有消息的情况下重新加载页面。在FF和IE中卸载窗口之前,该变量似乎没有更新,但在Chrome中也是如此。

    内联提交电话已经存在。我不确定为什么 - 这部分是继承的:

    HTML:

    <form id="form" method="post" action="http://www.google.com">
    <textarea class="watch" name="" id="" cols="30" rows="10"></textarea>
    </form>
    <br><br>
    <div class="submit disabled">
    <a class="" href="#" onclick="$('#form').submit();$(this).text('saving...');">Submit</a>
    </div>
    

    JS:

    var hasChanged=false;
    $('textarea.watch').on('keyup change', function(){
        hasChanged = true;
        $('.submit').removeClass('disabled');
    });
    $('.submit a').click(function() {
        hasChanged = false;
        window.removeEventListener('beforeunload');
    });
    window.addEventListener('beforeunload', function (e) {
        var confirmationMessage = 'You have unsaved changes.';
        if (hasChanged) {
            (e || window.event).returnValue = confirmationMessage;
            return confirmationMessage;
        }
    });
    

    CSS:

    .disabled a {
        pointer-events: none;
        color:#aaa;
        text-decoration:none;
    }
    

    在调用提交函数之前,我试图在“提交”按钮上取消绑定,但这似乎不起作用:

    <a class="" href="#" onclick="$(window).unbind('beforeunload');('#form').submit();$(this).text('saving...');">Submit</a>
    

    行动中的问题(在Chrome中打开,然后在Firefox / IE中打开):FIDDLE

1 个答案:

答案 0 :(得分:1)

问题可能是因为你有内联onClick逻辑,它在FF / Chrome中以不同的顺序执行。将表单发布到谷歌时也存在跨源错误,并且在浏览器中表现不同。

此外,您不需要取消绑定事件,hasChanged变量应该处理(如果我正确理解逻辑)。如果解除绑定事件,则需要引入函数作为参数(参见其他答案)。

请参阅此演示:http://jsfiddle.net/L4Gzs/15/

$('.submit a').click(function() {
    hasChanged = false;
    $('#form').submit();
    $(this).text('saving...');
});