javascript - window.resize - Won't fire until I've manually changed the browser width -

i have little code snippet here:

$(window).resize(function() {     if ($(window).width() <= 768) {             $('.menu-item-810').click(function () {                 $('.squares').slidedown(2000);             });         }     }); 

that says when browsers window width less or equal 768px, when click on element has class of .menu-item-810, slidedown .squares element.

that want, , work.. 99.8% correctly.

when screen width larger 768px, .squares element has different jquery effect, fades in , out, instead of sliding. needed slidedown instead, when in tablet/mobile view, wrote above snippet.

like said, works, i've opened browser, resized 768px or less width, browsed site , click on .menu-item-810. nothing happens. it's when manually resize browser again, amount, jquery fires. if i've resized browser again, , click .menu-item-810, .squares element slides down expected, if manually resize browser. thought jquery listening start if wrapped snippet in $(document).ready() doesn't work either, has same behavior without.

anyhoo, massively appreciated. i'm missing simple.

thanks guys!

actually, makes no sense? resize event handler fires thousands of times when window resized, , binding click event handler inside resize handler thousands of click handlers.

attach 1 single click handler, , check windows width inside it

$('.menu-item-810').click(function () {     if ($(window).width() < 768) {         $('.squares').slidedown(2000);     } });