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!');
});