I have a problem with jquery's resize() method and click event: in the example below, resizing the window, the click event only works in a some pixels. For example, resizing width of window one pixel at a time will work some times yes some times not. Why this behavior?
if I take the click event out of my code, toggleClass works fine for every pixel.
I have tried with both firefox and chrome.
EDIT: I need the click to work only when the window width is resized below a given size.
jquery:
$(document).ready(function(){
$(window).resize(function() {
if ($(window).width() < 1000) {
$(".button").click(function() {
$("#box").toggleClass("open");
});
}
});
});
css:
#box {
width: 300px;
height: 300px;
background-color: red;
}
#box.open {
background-color: green;
}
html:
<body>
<div id="box"></div>
<button class="button">Click</button>
</body>
This is because you're adding multiple click events every time the window is resized, so after a few resizes, one single click will
toggleClass,toggleClass,toggleClass... times how many pixels window was resized.-- Edit --
If it's just for a specific window size, you don't really need the
resizepart.You can just check the window size on every click.
This should be enough: