CODEWITHSUNDEEP
javascriptonclickresize
clestcruz
clestcruz

Reputation: 1111

On Click events fires multiple times whenever the browser is being resized

I have this mobile menu that I'm currently building at the moment and I'm facing an issue with on('click') events. Whenever I try resizing the browser the event fires multiple times. At first load the script and event works fine, but when I start resizing the browser the event fires multiple times.

Below is a sample of the code I'm working on. Is there a way it fires only when once after resizing. I tried a temporary solution but it does not seem to take effect.

(function($){
    'use strict';

    var mobileMenu = {

        init : function() {


            $('.region-primary-menu').addClass('primary-mobile-menu');

            $('.primary-mobile-menu .menu.-primary > .menu-item').addClass('mobile-menu-item');

            $('.primary-mobile-menu .menu.-primary > .mobile-menu-item').on('click', function() {
                $(this).toggleClass('active');

                console.log('click');
            })
        },

        clear : function() {
            $('.primary-mobile-menu, .mobile-menu-item').removeClass('primary-mobile-menu mobile-menu-item');
        }
    }

    $(document).ready(function() {


        if ($(window).width() < 1180) {
            mobileMenu.init();
        }

        else {
            mobileMenu.clear();
        }
    });



    $(window).on('resize', function(e) {

        var resizeTimer;

        clearTimeout(resizeTimer);
        var resizeTimer = setTimeout(function() {
            if ($(window).width() < 1180) {
                mobileMenu.init();
            }

            else {
                mobileMenu.clear();
            }
        }, 100)
    });



})(jQuery)

Upvotes: 1

Views: 61

Answers (2)

chairmanmow
chairmanmow

Reputation: 650

Because in your $(window).on('resize', function (e)... you do this :

 if ($(window).width() < 1180) {
    mobileMenu.init();
 }

And in the mobileMenu.init() function definition you attach an event listener, so whenever you resize the window beneath 1180 size, it's going to attach more event listeners.

 $('.primary-mobile-menu .menu.-primary > .mobile-menu-item').on('click' ...

Anyways the other answer tells you how to remove the event listener, which is what you should do to fix it.

Upvotes: 1

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28455

It is because of click event being attached in mobileMenu.init(); function. On resize, a new clickevent is getting attached. You can use jQuery.off

$('.primary-mobile-menu .menu.-primary > .mobile-menu-item').off('click').on('click',

Upvotes: 2

Related Questions