Событие Click в jquery не работает

Question

У меня есть div с классом по умолчанию «разблокировка» и текст с именем «UNLOCK». , когда я нажимаю на него, он говорит «UNLOCK» и в то же время удаляет класс «разблокировать» и добавляет класс «блокировка».

HTML

<div class='unlock'>UNLOCKED</div> 

это работало

$('.unlock').click(function(){ 
    $(this).removeClass('unlock').addClass('lock').text('LOCKED'); 
}); 

, но это не работало

$('.lock').click(function(){ 
    $(this).removeClass('lock'); 
}); 

И я не знаю, почему он не работает сог класс был уже заменил, чтобы он работал правильно?

В принципе, все, что я хочу, похоже на функцию переключения, которая при первом щелчке должна указывать LOCKED. затем, когда вы нажмете его снова, он должен сказать UNLOCKED.

Я пробовал toggle(), но это тоже не сработало, или я просто не знаю, как его реализовать. Итак, любые идеи, как я могу сделать эту функциональность работать?

вот fiddle

Answer 1

обработчики событий связаны только с выбранных элементов; они должны существовать на странице в момент, когда ваш код делает привязку к событию. Таким образом, $('.lock') не существует, когда выполняется привязка события, поэтому обработчик события не привязан.

Необходимо использовать Event Delegation с использованием метода делегированных событий .on().

т.е.

$(document).on('event','selector',callback_function) 

Пример

$(document).on('click', ".lock", function(){ 
    $(this).removeClass('lock'); 
});