Событие при resize окна

196

08 августа 2018, 17:20

Ребят уже битый час бьюсь, что не так со скриптом ? Собственно при разрешении меньше 992px окна браузера, должно отрабатывать событие. По клику добавляется класс. Проблема в том, что событие отрабатывает через раз. То-есть например я делаю resize окна, остановился на 768, событие отработало. Чуть передвинул браузер, все, уже не работает. Еще немного уменьшил окно, опять заработало.

https://codepen.io/brezze/pen/ERONZN

Где ошибка ?

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
</div>
$(window).on('resize', function() {
    if ($(window).width() <= 992) {
        $('.wrap').click(function(){
            $('.item', this).toggleClass('open');
        });
    } 
}).trigger('resize');

Answer 1

Нужно понимать, что при изменении размера, resize событие исполняется, зачастую, не один раз, а несколько, именно поэтому у вас не получается, когда у вас проходит несколько событий resize при изменении ширины.

Лучше всего в resize определять только ширину окна, а остальной функционал вынести. Также проверку на ширину делайте после нажатия, а не перед ним.

Ваш пример

let currentWidth = $(window).width(); 
 
$(window).on('resize', function() { 
  currentWidth = $(window).width(); 
}); 
 
 
$('.wrap').click(function() { 
  if (currentWidth <= 992) { 
    $('.item', this).toggleClass('open'); 
  } 
});

.item { 
  height: 300px; 
  width: 300px; 
  background-color: blue; 
  margin: 10px; 
} 
 
.wrap { 
  display: flex; 
  justify-content: center; 
} 
 
.open { 
  background-color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrap"> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>