如何解决如果用户误点击链接,如何停止用户并显示警报消息
如果用户在填写表单时错误地点击了标题中的任何链接,这些链接可以重定向到另一个页面。
所以我需要在重定向到另一个页面之前显示一条警告消息。
解决方法
您可以声明一个全局变量(附加到 window )来监听表单更改,一旦更改将其设置为 true ,
在每个链接<a>
(或标题链接,取决于您的选择器)点击设置一个监听器,检查这个变量,如果true
,它会弹出一个确认消息,否则离开页面直接
见下面的片段:
window.alertOnClick = false;
$(function() {
$("form").on("change",function() {
console.log("change");
window.alertOnClick = true
});
$("a").on("click",function(e) {
//e.preventDefault();
if (window.alertOnClick) {
var confirmLeave = confirm("are you sur to leave this page !");
confirmLeave ?
"" : e.preventDefault();
}
})
})
ul li {
display: inline;
margin-left: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a href="https://www.google.com">googl</a></li>
<li><a href="https://www.stackoverflow.com">stackoverfow</a></li>
<li><a href="http://www.example.com">example</a></li>
</ul>
<form>
name : <input type="text">
<input type="radio" name="radio"> one
<input type="radio" name="radio"> two
<button type="button">submit </button>
<form>
我找到了我一直在寻找的答案
jquery.are-you-sure.js 是一个自定义的 jquery 插件,所以我们需要添加
$('form').areYouSure();
但是我的表单的问题是它在内部更新了一些加载字段。 所以在用户体验上,即使他不更改页面上的任何内容并单击任何标题链接,此插件也会出现弹出消息。
所以最后我找到了解决方案,我需要在最后或在初始化所有表单字段之后触发调用。
$('#form').trigger('reinitialize.areYouSure');
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。