toggleclass не обязательный клик событие

Question

Добавил класс к моей кнопке и пытался запустить onclick событие после, а не работать. довольно простой код, почему событие не является обязательным, что я делаю неправильно? не

http://jsfiddle.net/davidThomas/n2WUn/3/

---

$(".remove-participant").on("click",function(){ 
$(this).html('Approve'); 
$(this).toggleClass('add-participant'); 
}); 

$(".add-participant").on("click",function(){ 
alert('why no alert?'); 
$(this).html('Waitlist'); 
$(this).toggleClass('add-participant'); 
}); 

Answer 1

Вы удаление и добавление классов динамически, так что ваше событие связывания больше недоступна. Один из способов решения этой проблемы - использование делегирования событий.

$(document).on("click", ".remove-participant", function() { 
    $(this).html('Approve'); 
    $(this).toggleClass('add-participant'); 
}); 

$(document).on("click", ".add-participant", function() { 
    alert('why no alert?'); 
    $(this).html('Waitlist'); 
    $(this).toggleClass('add-participant'); 
}); 

Вместо того, чтобы использовать document селектор контейнера, который существует в DOM в любой данный момент времени.

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