我被要求实施一项功能......
以下是解决方案中使用的代码示例。 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
答案 0 :(得分:1)
问题可能是因为你有内联onClick
逻辑,它在FF / Chrome中以不同的顺序执行。将表单发布到谷歌时也存在跨源错误,并且在浏览器中表现不同。
此外,您不需要取消绑定事件,hasChanged
变量应该处理(如果我正确理解逻辑)。如果解除绑定事件,则需要引入函数作为参数(参见其他答案)。
请参阅此演示:http://jsfiddle.net/L4Gzs/15/
$('.submit a').click(function() {
hasChanged = false;
$('#form').submit();
$(this).text('saving...');
});