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>

结果不错：

这看起来不错，但我遇到了一个小问题。启动时的活动部分是＆＃34; Inscription＆＃34; 但是当我尝试移动到登录部分时，似乎 onclick 事件没有响应第一个时间。我必须在链接上单击两次＆＃34; 登录＆＃34;使它工作。

我认为 Onclick 第一次没有响应但是有一条简单的警告消息它正在响应但是没有应用更改...我必须点击两次，这只是第一次时间......

更确切地说：1）我点击显示对话框 - 弹出式窗口 2）我在登录上单击两次以使其正常工作 3）它工作正常，我可以从 Inscription 转到登录和反之亦然

问题是为什么我必须点击两次才能使其正常工作？

此外，我注意到当我显示此Pop并且单击默认情况下的活动选项卡＆＃34; Inscription ＆＃34;问题消失了，它运作正常！似乎通过点击＆＃34; 铭文＆＃34;我改变了一些东西，但我无法弄清楚。

谢谢你的帮助。

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中。由于代码用于设置click事件侦听器，因此当您将其放入函数时，这意味着在函数至少运行一次之前不会设置事件侦听器。 另一个问题是，每次点击都会设置一个新的事件监听器，您将点击处理程序的触发次数与之前的点击次数相同。

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

JavaScript和onclickEvent的问题

2 个答案: