jquery中的Click事件不起作用

Question

我有一个div，默认类为＆＃39; unlock＆＃39;和文本名为＆＃39; UNLOCK＆＃39;。 当我点击它时，它会说'UNLOCK＆＃39;并同时删除课程＆＃39;解锁＆＃39;并添加一个＆＃39; lock＆＃39;。

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