JQuery click() все еще запускается после удаления класса .clickable

У меня есть событие click, назначенное div определенного класса. Когда происходит щелчок, класс удаляется из div. Тем не менее, вы все равно можете щелкнуть div, и событие click() будет запущено (даже если класс был удален). Вот пример:

HTML:

<div class="clickable">
  <p>Click me</p>
</div>

JavaScript/JQuery:

$('.clickable').click(function() {
  $(this).removeClass('clickable');
  $(this).addClass('not-clickable');
  alert('Clicked!');
});

Я вижу, что классы удаляются и добавляются (поскольку цвет текста изменяется в соответствии с моим CSS). Тем не менее, вы все еще можете нажать на div несколько раз, и alert() все равно появится.

Это также похоже на обратное; поэтому, если я добавлю класс clickable в div, код в $('.clickable').click(function() {...}); не будет работать (но визуально, div изменяется в соответствии с новыми стилями).

Как я могу сделать это так, чтобы события click соответствовали классам, даже после того, как jQuery добавляет/удаляет класс clickable?

Ответы

Ответ 1

Когда вы прикрепляете обработчик события к элементу DOM, он остается неповрежденным. Класс - это всего лишь способ ссылки на элемент, и изменение класса не приведет к отмене обработчиков событий, поскольку вам придется вручную отключить обработчик, а если использовать jQuery 1.7+ on() и off(), это способ go:

$('.clickable').on('click', function() {
  $(this).removeClass('clickable').addClass('not-clickable').off('click');
});

это сделало бы элемент кликабельным только один раз, и вы могли бы просто использовать встроенную функцию one(), так как это автоматически отвяжет обработчик после первого щелчка:

$('.clickable').one('click', function() {
  $(this).removeClass('clickable').addClass('not-clickable');
});

Ответ 2

$(document).on('click', '.clickable', function() {
  $(this).removeClass('clickable');
  $(this).addClass('not-clickable');
  alert('Clicked!');
});

Ответ 3

Вы можете использовать этот

$(document.body).delegate('.clickable', 'click', function(e){
    $(this).removeClass('clickable');
    alert('Clicked!');
});

Из jQuery версии 1.7 delegate() заменяется на on()

$(document.body).on('click', '.clickable', function(e){
    $(this).removeClass('clickable');
    alert('Clicked!');
});

или

$('.clickable').on('click', function(e){
    $(this).removeClass('clickable').off('click');
    alert('Clicked!');
});

Также вы можете использовать метод one() - он равен привязке, но встречается один раз

$('.clickable').one('click', function(e){
    alert('Clicked!');
});

Ответ 4

$('.clickable').live('click',function() {
  $(this).removeClass('clickable');//remove the class
  $(this).unbind('click');//to remove the click event
  $(this).addClass('not-clickable');
  alert('Clicked!');
});

Ответ 5

unbind click event - как $(this).unbind('click');' Попробуйте это

$('.clickable').click(function() {
  $(this).removeClass('clickable');
  $(this).addClass('not-clickable');
  $(this).unbind('click');'
});

Ответ 6

Ваше понимание четного назначения немного неверно. Пожалуйста, прочитайте свой код

$('.clickable').click(function()

Найти элемент с классом .clickable '
Назначить обработчик onclick элементу

Смотрите, это элемент, который получает обработчик, а не имя класса. Вам нужно удалить обработчик. Для этого вы можете попробовать:

$('.clickable').click(function() {
    $(this).removeClass('clickable');
    $(this).addClass('not-clickable');
    alert('Clicked!');
    $(this).unbind('click');
});

Ответ 7

Если вы хотите вызвать событие click только один раз, используйте функцию jQuery one для привязки событий, она сама уничтожит.

$('.clickable').one('click',function() {
   $(this).removeClass('clickable');//remove the class
   $(this).addClass('not-clickable');
   alert('Clicked!');
});