我正在使用DirtyForms和$.blockUI插件,后者在点击链接时更改页面(在我的应用中,某些页面需要花费几秒钟来加载,视觉反馈很好)。
当我更改字段内容然后单击任何链接时,会触发DirtyForms:但是当我取消保留在页面上的进程时,$.blockUI
会启动其游戏,导致页面卡住
$('form[method="post"]').dirtyForms();
$('a').on('click', function(){
$.blockUI();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
<p>Change the field content to activate DirtyForms, then click on the link.<br>
When the popup appears, click on "cancel" to stay on the page.<br>
Watch blockUI getting fired as the link is going to be followed</p>
<form action="#" method="post">
<input type="text" name="username" required>
<button type="submit">send</button>
</form>
<a href="https://google.com">click me after changing field content</a>
请,任何解决方案?
编辑:我也尝试了stay.dirtyforms
和afterstay.dirtyforms
事件,但它们没有效果。 defer.dirtyforms
似乎有效,但事件被触发了两次(我要检查console.log()
)我不确定这是不是...
答案 0 :(得分:2)
我编辑了我的回答:我添加了一些代码行,首先禁用onbeforeunload
对话框提醒taken from here。最后,您可以尝试另一个想法的答案链接。
我的想法:您必须阻止默认链接操作并使用$ .blockUI Modal Dialogs methods打开自定义对话框,然后从中捕获链接属性href
link将其放在变量中,并使用对话框的#yes
按钮的变量值。
查看此解决方案是否可以满足您的需求
/* beforeunload bind and unbind taken from https://gist.github.com/woss/3c2296d9e67e9b91292d */
// call this to restore 'onbeforeunload'
var windowReloadBind = function(message) {
window.onbeforeunload = function(event) {
if (message.length === 0) {
message = '';
};
if (typeof event == 'undefined') {
event = window.event;
};
if (event) {
event.returnValue = message;
};
return message;
}
};
// call this to prevent 'onbeforeunload' dialog
var windowReloadUnBind = function() {
window.onbeforeunload = function() {
return null;
};
};
var linkToFollow; // href to follow
$('form[method="post"]').dirtyForms();
$('a').on('click', function(e){
e.preventDefault();
windowReloadUnBind(); // prevent dialog
$.blockUI({ message: $('#question'), css: { width: '275px' } });
linkToFollow = $(this).attr('href');
});
$('#no').click(function() {
$.unblockUI();
return false;
});
$('#yes').click(function() {
$(window.location).attr('href', linkToFollow);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
<p>Change the field content to activate DirtyForms, then click on the link.<br>
When the popup appears, click on "cancel" to stay on the page.<br>
Watch blockUI getting fired as the link is going to be followed</p>
<form action="#" method="post">
<input type="text" name="username" required>
<button type="submit">send</button>
</form>
<a href="https://google.com" class="link">click me after changing field content</a>
<div id="question" style="display:none; cursor: default">
<h6>Would you like to contine?.</h6>
<input type="button" id="yes" value="Yes" />
<input type="button" id="no" value="No" />
</div>
从其他答案中获取的其他想法:其他想法是在jQuery.ajax({})
as seen in this answer
beforeunload
调用