我有一个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
答案 0 :(得分:2)
事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码进行事件绑定调用时页面上。因此,$('.lock')
在执行事件绑定时不存在,因此事件处理程序没有绑定。
您需要使用Event Delegation委托事件方法{。}}来使用.on()。
即
$(document).on('event','selector',callback_function)
实施例
$(document).on('click', ".lock", function(){
$(this).removeClass('lock');
});