jQuery several clicks on element overload content

Question

I have created a login and a registration forms inside a modal. you can switch over the two forms just by clicking either on the heading(h2) or on the switcher(span). Till now every thing is working perfect however when i click several times 8 or 10 on the switchers ('heading or span') both forms appears !!! here is the code

 $('#modal-switcher, #modalheading').on('click', function(){


    // reset form on switch
    $('.modal-content form').trigger('reset');

         var h2   = $('#modalheading'),
         signup   = $('#modalsignupform'),
         login    = $('#modalloginform'),
         switcher = $('#modal-switcher');

    if(h2.hasClass('signup')){

        h2.addClass('login').removeClass('signup').html('Login OR <a id="modal-switcher1">Signup</a>');
        signup.hide();
        login.fadeIn('slow');
        switcher.text('Go to signup');

    }else{
        h2.addClass('signup').removeClass('login').html('Signup OR <a id="modal-switcher1">Login</a>');
        login.hide();
        signup.fadeIn('slow');
        switcher.text('Go to login');
    }


});

any explanation why several clicks cause this problem ??? what could be a good solution for thanks !!

i would not recommend changing the html, just have 2 separate divs that you toggle the display via a css class (that does `display: none;` ) or something similar — Isaac, Apr 17 '17 at 21:19
If absolutely required, you could block further `click`action until the page/content replacement is executed. — Searching, Apr 17 '17 at 21:24
@Searching yep that's what im try to figure out how to stop these several clicks , the .one('click') is not useful — lotfio, Apr 17 '17 at 21:30
Are you leaving out some other important code? Where is `modal-switcher`? Is `modal-switcher1` the same? If you need to change the text of the header then place another element that can be changed via the `.text()` method. `Signup OR Login ... $('.heading-text').text('Login OR');` — trevster344, Apr 17 '17 at 21:37
One thing to note is `hide` `fadeIn` etc.. work on timers,so no guarantee that it will always behave the same way... [check this](http://stackoverflow.com/a/9831944/1339516). So try @Isaac option.. It is possible to use css animation.. — Searching, Apr 17 '17 at 22:16

Nutscracker · Accepted Answer · 2017-04-17T22:43:40.190

I think your problem with .fadeIn('slow'). If you quickly switch, then the animation does not have time to end before the second event begin. And you will have artefacts. I recomend you to block elements while event will not complete. For example you can try something like this:

 $('#modal-switcher, #modalheading').on('click', function(){

    if($(this).hasClass('locked')) {
       return false;
    }

    $('#modal-switcher').addClass('locked'); 
    $('#modalheading').addClass('locked'); 

    // reset form on switch
    $('.modal-content form').trigger('reset');

         var h2   = $('#modalheading'),
         signup   = $('#modalsignupform'),
         login    = $('#modalloginform'),
         switcher = $('#modal-switcher');

    if(h2.hasClass('signup')){

        h2.addClass('login').removeClass('signup').html('Login OR <a id="modal-switcher1">Signup</a>');
        signup.hide();
        login.fadeIn('slow', function(){
        //on complete
         $('#modal-switcher').removeClass('locked'); 
         $('#modalheading').removeClass('locked'); 

        });
        switcher.text('Go to signup');

    }else{
        h2.addClass('signup').removeClass('login').html('Signup OR <a id="modal-switcher1">Login</a>');
        login.hide();
        signup.fadeIn('slow', function(){
        //on complete
         $('#modal-switcher').removeClass('locked'); 
         $('#modalheading').removeClass('locked'); 

        });
        switcher.text('Go to login');
    }
});

You can use some preloader icon with (my custom)locked class.

jQuery several clicks on element overload content

1 Answers1