javascript - Only run JQuery on mobile view -

i'm kinda new javascript overall, , i've made script myself supposed add classes other classes on click.

now problem have code supposed work mobile view (under 800px width) works well, when resize window above, after using script still active.

script:

$(document).ready(function() {      if ($(window).width() <=800 ) {         $('.mobilenavbutton').click(function() {             $('.mainnav').toggleclass('active');             $('.mobilenavbutton').toggleclass('active');         });         $('.hasdropdown').click(function() {             $('.dropdown').toggle('slide');             $('.dropdown').toggleclass('active');             $('.hasdropdown').toggleclass('rotate');         });         $('.hassubdropdown').click(function() {             $('.subdropdown').toggle('slide');             $('.subdropdown').toggleclass('active');             $('.hassubdropdown').toggleclass('rotate');         });     } }); 

you guys helped me out lot! thanks!

you can handle window resize event : (but kind of behavior should use css media queries )

update : limit calls on resize

var resizetimer; $(window).resize(function(e) {     cleartimeout(resizetimer);     resizetimer = settimeout(function() {         if ($(window).width() <= 800) {             $('.mobilenavbutton').click(function() {                 $('.mainnav').toggleclass('active');                 $('.mobilenavbutton').toggleclass('active');             });             $('.hasdropdown').click(function() {                 $('.dropdown').toggle('slide');                 $('.dropdown').toggleclass('active');                 $('.hasdropdown').toggleclass('rotate');             });             $('.hassubdropdown').click(function() {                 $('.subdropdown').toggle('slide');                 $('.subdropdown').toggleclass('active');                 $('.hassubdropdown').toggleclass('rotate');             });         } else {             $('.hasdropdown').off("click");             $('.hassubdropdown').off("click");             $('.mobilenavbutton').off("click");         }     },250); });