jquery中的Click事件不起作用

时间:2014-11-03 05:54:19

标签: jquery

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

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

1 个答案:

答案 0 :(得分:2)

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码进行事件绑定调用时页面上。因此,$('.lock')在执行事件绑定时不存在,因此事件处理程序没有绑定。

您需要使用Event Delegation委托事件方法{。}}来使用.on()

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

实施例

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