jquery重定向按钮点击
Posted
技术标签:
【中文标题】jquery重定向按钮点击【英文标题】：jquery redirect on button click 【发布时间】：2017-12-11 04:44:54 【问题描述】：我正在尝试根据访问者位置重定向按钮单击，并且我有两个窗口的模式。以及使用 freegeoip.net： 我将它与 Wordpress 一起使用：脚本正确连接到 wordpress 并运行，但重定向不起作用。
我同样希望此模式在每次访问时仅出现一次，并且在通过网站的所有导航中出现，而不是在每次页面重新加载时出现。提前致谢。
下面是 jQuery：
jQuery(document).ready(function()
jQuery("#myModal").modal('show');
jQuery.ajax(
url: 'https://freegeoip.net/json/',
type: 'POST',
dataType: 'jsonp',
success: function(location)
// If the visitor is browsing from Canada.
if (location.country_code === 'CA')
jQuery('#subscriber-ca').on('click', function()
window.location.replace('http://www.google.com');
);
jQuery('#subscriber-us').on('click', function()
// Redirect visitor to the USA.
window.location.replace('http://www.facebook.com');
);
else if(location.country_code === 'US')
jQuery('#subscriber-ca').on('click', function()
window.location.replace('http://www.google.com');
);
jQuery('#subscriber-us').on('click', function()
// Redirect visitor to the USA.
window.location.replace('http://www.facebook.com');
);
);
);
这是模态：
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Subscribe our Newsletter</h4>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button id="subscribe-us" type="submit" class="btn btn-primary pull-left">US Subscriber</button>
<button id="subscribe-ca" type="submit" class="btn btn-primary pull-right">Canada Subscriber</button>
</form>
</div>
</div>
</div>
</div>
【问题讨论】：
当您尝试单击重定向但失败时，控制台中有什么内容？ 我试图控制台记录点击事件，但没有反馈：这就是我在控制台上能找到的全部内容，JQMIGRATE：已安装 Migrate，版本 1.4.1 为什么要使用点击成功功能？ 你想触发点击事件还是用户想点击？ @vel 是的，我想要一个点击事件，当访问者点击按钮时，他/她应该根据他/她的位置和点击的按钮进行重定向，因为模式有两个按钮。我不确定这里缺少什么。因为即使使用 console.log 也不会在控制台上打印任何内容:( 【参考方案1】：试试这个代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Subscribe our Newsletter</h4>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button id="ussubscribe" type="button" class="btn btn-primary pull-left">US Subscriber</button>
<button id="casubscribe" type="button" class="btn btn-primary pull-right">Canada Subscriber</button>
</form>
</div>
</div>
</div>
</div>
<script>
var locationstatus = false;
var userlocation = '';
jQuery(document).ready(function()
jQuery.ajax(
url: 'https://freegeoip.net/json/',
type: 'POST',
dataType: 'jsonp',
success: function(locationresponse)
userlocation = locationresponse.country_code;
locationstatus = true;
console.log(userlocation);
);
);
$('#ussubscribe').on('click', function()
alert();
console.log(userlocation);
if (locationstatus)
if(locationstatus=='CA')
window.location.replace('http://www.google.com');
);
$('#casubscribe').on('click', function()
console.log(userlocation);
if (locationstatus)
if(locationstatus=='US')
window.location.replace('http://www.facebook.com');
);
</script>
</body>
</html>
【讨论】：
太棒了！那行得通，有什么建议可以让我只弹出一次吗？而不是页面上的所有导航？ 你必须使用本地存储【参考方案2】：美国用户
change type="submit" to type="button" //还要确保
jQuery('#subscriber-us').on('click', function() //check the spelling which is subscribe-us
并在 ajax 调用之外添加 onclick 事件 if else 子句中只隐藏/显示模式和按钮
【讨论】：
太棒了！那行得通，有什么建议可以让我只弹出一次吗？而不是页面上的所有导航？【参考方案3】：替换你的代码：
<button id="subscribe-us" type="submit" class="btn btn-primary pull left">US Subscriber</button>
<button id="subscribe-ca" type="submit" class="btn btn-primary pull-right">Canada Subscriber</button>
与：
<button id="subscriber-us" type="button" class="btn btn-primary pull left">US Subscriber</button>
<button id="subscriber-ca" type="button" class="btn btn-primary pull-right">Canada Subscriber</button>
如果buttons不是在ajax request上动态创建的，则在ajax之外绑定点击事件。
【讨论】：
太棒了！那行得通，有什么建议可以让我只弹出一次吗？而不是页面上的所有导航？谢谢！【参考方案4】：要检查这是否是用户的第一次访问，您可以将值存储在会话存储中：
window.sessionStorage.setItem("first_visit", "Y");
加载时检查会话存储。如果它不存在，则打开模式对话框。
希望对你有帮助。
【讨论】：
以上是关于jquery重定向按钮点击的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jQuery 或仅使用 Javascript 将按钮重定向到另一个页面
Javascript - 当用户点击退出按钮时，确认框重定向用户
在 ASP.net MVC 5 应用程序中单击按钮时使用 JavaScript/jQuery 将用户重定向到页面