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

Question

[weranda]

Есть простой код, который по клику разворачивает соседние блоки.
Пример тут: 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 видит элемент с классом, но класса в разметке уже нет, он удален...

Answer 1

[0xD34F]

От того, что вы удалили класс, обработчик события никуда не девается.

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

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

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

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

Comments

[weranda]

Спасибо, работает.
Даже и не знал о таком)

Answer 2

[Rsa97]

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