@weranda

Удаляю класс, а jQuery все равно обрабатывает его — как исправить?

Есть простой код, который по клику разворачивает соседние блоки.
Пример тут: https://codepen.io/weranda/pen/oNxZMMg

Все работает, но есть одно маленькое но — после клика на элемент, по которому разворачиваются соседние элементы, я удаляю класс этого элемента, за который "цепляется" jQuery, чтобы раскрыть соседние элементы и даже после удаления класса код jQuery все равно как бы видит этот уже удаленный класс и при повторном клике на элементе сворачивает соседние элементы.
Как сделать так, чтобы элементы раскрывались всего раз и более с ними ничего не происходило, т. е. чтобы они больше не сворачивались?

<div class="block">
	<div class="el1 el1--closed">Element 1</div>
	<div class="el2">Element 2</div>
	<div class="el3">Element 3</div>
</div>

.el2, .el3{
	display: none;
}

$('.el1--closed').click(function () {
    $(this).siblings().slideToggle();
    $(this).removeClass('el1--closed');
})


P.S.
И объясните, пожалуйста, почему так происходит — класс удален, но он как бы и не удален, jQuery видит элемент с классом, но класса в разметке уже нет, он удален...
  • Вопрос задан
  • 61 просмотр
Решения вопроса 2
0xD34F
@0xD34F Куратор тега jQuery
От того, что вы удалили класс, обработчик события никуда не девается.

Сделайте однократно срабатывающий обработчик события:

$('.el1--closed').one('click', function() {
  $(this)
    .siblings()
    .slideToggle();
});

Или, вешайте делегированный обработчик:

$('.block').on('click', '.el1--closed', function() {
  $(this)
    .removeClass('el1--closed')
    .siblings()
    .slideToggle();
});
Ответ написан
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Вы не понимаете, как работают обработчики событий в JS.
$('.el1--closed').click(function () { ... })
Это читается как найти все элементы с указанным классом и к каждому прикрепить обработчик события 'click'. После этого обработчик остаётся прикреплённым к элементу до тех пор, пока вы не открепите его с помощью .off(). Изменение класса или других атрибутов элемента не влияет на уже прикреплённые обработчики.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы