2012-02-01 3 views
0

У меня есть несколько элементов с одинаковым классом «кликабельны», я хочу привязать все эти классы:jQuery.bind разрывания, кратные экземпляры классов

$('.clickable').bind('click', function() 
    { 
     $(this.id).html('clicked'); 

    } 

Я предполагающей привязку связывает каждый элемент класс «clickable» индивидуально. Тогда в этом Bind-функции, я хочу, чтобы отвязать в данный момент щелкнул элемент с:

$(this.id).unbind('click'); 

Так что, если нажать еще раз внутри этого элемента, он не запускает щелчок-функцию еще раз. И после этого, после выполнения элементов внутри элемента (замените текст на эти элементы тем, что помещает в него текущий текст, и когда вы нажимаете на него, он изменит html для него). Я хочу снова перекрыть щелчок, но Я cant't, кажется, отвязать щелчок для this.id ...

Некоторые скрипку разъяснений: http://jsfiddle.net/TrySpace/QZMP6/7/

ответ

4

Возможно потому, что ваш селектор неправильно (потому что ваш селектор будет перевести на что-то вроде $("my_id"), когда вы на самом деле хочу $("#my_id")). В этом случае вы можете просто:

$(this).unbind('click'); 

Это, в конечном счете, лучше, чем запрос к DOM для элемента.

Боковое примечание: bind и unbind устарели от jQuery 1.7. Обновленный способ написать это с on и off:

$(".clickable").on("click", function() { 
    /* ... */ 
    $(this).off("click"); 
}); 

Редактировать (на комментарии ниже):

Если вы хотите, чтобы предотвратить обработчик родительских событий из уведомления, а также, вы можете свяжите новый обработчик, который предотвращает распространение события:

$(this).off("click").on("click", function (e) { 
    e.stopPropagation(); 
}); 
+1

@Gasman, если вы хотите использовать идентификатор, вам нужно включить '#' спереди, например '$ ('#' + this.id)'. Конечно, нет причин, по которым вы могли бы сделать это, когда вы можете просто сделать '$ (this)', но я решил, что я укажу конкретное место, где вы неправильно выбрали селектор. –

+0

@BenLee: Спасибо - я обновил свой ответ, чтобы включить ваш комментарий –

+1

@Andrew: Документы не отображают 'bind/unbind' как официально устаревшие, но, конечно же, они описывают' on/off' как * "предпочтительно «*. –

1

Вы можете рассмотреть делегирование событий селектора на основе JQuery, и просто удалить 'clickable' CLA сс при нажатии ...

$('body').on('click', '.clickable', function() { 
    $(this).html('clicked') 
      .removeClass('clickable'); 
}); 

Или в пре-JQuery 1.7, но опубликовать 1.4 или так ...

$('body').delegate('.clickable', 'click', function() { 
    $(this).html('clicked') 
      .removeClass('clickable'); 
}); 

В обоих случаях я поместил обработчик делегата на 'body', но было бы лучше разместить его на более локальном элементе, если он охватывает все элементы .clickable.

Смежные вопросы