Jquery function on specific window size

Question

I'm trying to make a script only work when the user is in 1024 or less. It works somewhat okay, if the user don't resize the window. But when i fire the click event on lower than 1024 and then resize to lets say 1200 the toggle classes have been added and the animation trickers again.

Any suggestions?

if ($(window).width() <= 1024) {
    $("#primary-menu").click(function(){
        $(".main-navigation").removeClass("toggled");
        $(".cmn-toggle-switch").removeClass("active");
        $(".menu-item").toggleClass("animated").toggleClass("wow").toggleClass("fadeInUp");
    });

    $(".hamburger-menu-text").click(function(){
        $(".cmn-toggle-switch").toggleClass("active");
        $(".main-navigation").toggleClass("toggled");
        $(".menu-item").toggleClass("animated").toggleClass("wow").toggleClass("fadeInUp");
    });     
};

Answer 1

use if statement inside the click event

 $("#primary-menu").on('click',function(){
     if ($(window).width() <= 1024) {
        //..........
     }else{
        //..........
     }
});