CODEWITHSUNDEEP
javascriptjqueryhtmlonclick
Safus09
Safus09

Reputation: 101

Issues with JavaScript and onclickEvent

I'm creating a web site and for login and Subscribe I went for jquery.avgrund ( the 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>

The Result is not bad:

enter image description here

enter image description here

This looks nice but I have a small problem. The active section on start is "Inscription" but when I try to move to the login section it seems that the onclick event is not responding from the first time. I have to click twice on the link "LogIn" to make it work.

I thought that the Onclick was not responding for the first time but with a simple alert message it is responding but the changes are not applied... I have to click twice and this only the first time ...

To be more exact : 1) I click to show the dialog box - Pop-in 2) I click twice on Login to make it work 3) it works fine and I can go from Inscription to Login and vice versa normally

The Problem is why do I have to click twice to make it work?

Also I noticed that when I show this Pop in and than click on the active tab which is by default "Inscription" the problem is gone and it works fine! It seems that by clicking on "Inscription" I'm changing something but I can't figure it out.

Thanks for you help.

Upvotes: 0

Views: 89

Answers (2)

rrk
rrk

Reputation: 15846

Use this. Remove onClick attribute from code. What was happening with the first and second click:

The first click was enabling the function binding and from the second click the event handler stated working.

<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>

Change <a href="#signup" id="inscriptionMenu" onclick="return myFunction()">Inscription</a> to <a href="#signup" id="inscriptionMenu">Inscription</a>

Upvotes: 1

PeterKA
PeterKA

Reputation: 24638

Do not put the following code in a function but rather in DOM ready. Since the code is used to set up an click event listener, when you put it in a function, it means that the event listener will not be set up until the function runs at least once. The other problem is that every click will set up a new event listener and you will have the click handler firing as many times as the number of previous clicks.

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

Your set up should be like this:

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

This way the event listener gets set up as soon as the DOM is ready. If any of the a elements are created after DOM ready then use this version:

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

Or:

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

Upvotes: 1

Related Questions