关于JavaScript和onclickEvent的问题
我正在创建一个网站，为了登录和订阅，我去了jquery.avgrund ( PopIn) .
<html>
<head>
<!-- CSS,JS ... -->
<script>
function myFunction() {
$('.tab a').on('click', function (ev) {
ev.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
return false;
}
</script>
</head>
<body>
<script src="js/jquery.avgrund.js"></script>
<script>
$(function() {
$('#show').avgrund({
showClose: true,
showCloseText: 'close',
onBlurContainer: '.container',
template:
'<br>'+
'<ul class="tab-group">'+
'<li class="tab active">'+
'<a href="#signup" id="inscriptionMenu" onclick="return myFunction()">Inscription</a>'+'</li>'+
'<li class="tab">'+'<a id="loginMenu" href="#login" onclick="return myFunction()">Log In</a>'+'</li>'+
'</ul>'+
'<div class="tab-content">'+
'<div id="signup">'+
'<div class="field-wrap">'+
'<br>'+'<br>'+
'<h1>Inscription</h1>'+'<br>'+
'<label class="label2">Email Address<span class="req">*</span>'+'</label>'+
'<br>'+'<br>'+'<input type="email" required="" autocomplete="off" class="input1">' +
'</div>' +
'<div class="field-wrap">'+
'<label class="label2">Password<span class="req">*</span>'+'</label>'+
'<br>'+ '<br>'+'<input type="password" required="" autocomplete="off" class="input1">' +
'</div>'+'<br>'+
'<input type="button" value="s\'inscrire" class="buttonlogin" >'+'<br>' +'<br>'
+'<h3>-- OU --</h3>'+'<br>'+
'<input type="button" class="buttonfacebook" style=" background-image: url(images/facebook.png); ">'+
'</div>'+
'<div id="login" hidden=true>'+
'<h1>Welcome Back!</h1>'+
'</div>'+
'</div>'
});
});
</script>
</body>
</html>结果不错：
这个看起来不错但我有个小问题。开始时的活动部分是“铭文”，但是当我试图移到登录部分时，onclick事件似乎从第一次开始就没有响应。我必须在链接"LogIn“上点击两次才能工作。
我认为Onclick不是第一次响应，而是使用一个简单的警报消息来响应，但是更改没有应用.我必须点击两次而这只是第一次..。
更确切地说: 1)我点击显示对话框- Pop-in 2)我点击两次登录才能工作3)它可以正常工作，我可以从铭文转到登录，反之亦然。
问题是，为什么我要点击两次才能让它工作呢？
我还注意到，当我显示这个Pop，而不是单击active选项卡(默认情况下是“铭文”)时，问题就消失了，而且工作正常！似乎通过点击“铭文”，我改变了一些东西，但我无法弄清楚。
谢谢你的帮助。
回答 2
Stack Overflow用户
发布于 2015-08-14 13:59:08
使用这个。从代码中删除onClick属性。第一次和第二次单击发生了什么：
第一次单击是启用函数绑定，从第二次单击开始，事件处理程序就开始工作。
<script>
$(document).on('click', '.tab a', function (ev) {
ev.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
</script>将<a href="#signup" id="inscriptionMenu" onclick="return myFunction()">Inscription</a>更改为<a href="#signup" id="inscriptionMenu">Inscription</a>
Stack Overflow用户
发布于 2015-08-14 14:02:18
不要将下面的代码放在函数中，而是在DOM就绪中。由于代码用于设置单击事件侦听器，所以当您将其放入函数中时，这意味着在该函数至少运行一次之前不会设置事件侦听器。另一个问题是，每次单击都会设置一个新的事件侦听器，并且单击处理程序的触发次数与以前的单击次数一样多。
$('.tab a').on('click', fn);你的安排应该是这样的：
$(document).ready(function() {
$('.tab a').on('click', fn);
//other code
});这样，一旦DOM准备就绪，事件侦听器就会被设置。如果在DOM就绪之后创建了任何a元素，那么使用以下版本：
$(document).ready(function() {
//other code, including code adding a elements
$('.tab a').on('click', fn);
});或者：
$(document).ready(function() {
$(document).on('click', '.tab a', fn);
//other code, including code adding a elements
});https://stackoverflow.com/questions/32011867
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号