JavaScript 和 onclick 事件的问题

Question

我正在创建一个网站，为了登录和订阅，我选择了 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>

结果还不错：

这看起来不错，但我有一个小问题。启动时的活动部分是 "Inscription" 但是当我尝试移动到登录部分时，似乎 onclick 事件没有响应从第一次。我必须在 link "LogIn" 上单击两次才能使其正常工作。

我认为 Onclick 第一次没有响应，但它有一个简单的警报消息，但没有应用更改...我必须单击两次这只是第一次......

更准确地说：1) 我单击以显示对话框 - 弹出窗口 2) 我点击两次 Login 让它工作 3) 它工作正常，我可以从 Inscription 转到 Login 和通常反之亦然

问题是为什么我必须点击两次才能让它工作？

我还注意到，当我显示此 Pop 时，点击默认为“Inscription”的活动选项卡，问题就消失了，而且工作正常！似乎通过单击“Inscription”我正在更改某些内容，但我无法弄清楚。

谢谢你的帮助。

Answer 1

用这个。从代码中删除 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>

Answer 2

不要将以下代码放在函数中，而是放在DOM 准备中。由于代码是用来设置点击事件监听器的，当你把它放在一个函数中时，意味着事件监听器不会被设置，直到函数至少运行一次。 另一个问题是每次点击都会设置一个新的事件侦听器，点击处理程序将触发与之前点击次数相同的次数。

$('.tab a').on('click', fn);

你的设置应该是这样的：

$(document).ready(function() {
    $('.tab a').on('click', fn);
    //other code
});

这样，一旦 DOM 准备就绪，事件侦听器就会被设置。如果任何 a 元素是在 DOM 准备好之后创建的，则使用此版本：

$(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
});

JavaScript 和 onclick 事件的问题

Issues with JavaScript and onclickEvent

html

javascript

jquery

onclick