我有一些像这样的jQuery代码：
$(document).ready(function() {
$("img.off").click(function() {
alert('on');
$(this).attr('class','on');
});
$("img.on").click(function() {
alert('off');
$(this).attr('class','off');
});
});
选择器适用于具有在原始HTML文档中定义的类名的图像,但是在使用jQuery操作类名后,img项不会响应使用它的新类的选择器.
换句话说,运行上面的代码,如果单击“关闭”img,它将触发第一个函数,并将类更改为“on”.但是,再次单击此图像不会触发第二个功能(正如我预期的那样),而是再次触发第一个功能.这就好像选择器正在读取旧DOM而不是更新版本.我在这做错了什么？
Firefox 3.6.3 – jQuery 1.4.2
解决方法
您可以使用
.live()来执行您想要的操作,如下所示：
$(function() {
$("img.off").live('click',function() {
alert('on');
$(this).attr('class','on');
});
$("img.on").live('click',function() {
alert('off');
$(this).attr('class','off');
});
});
当你执行$(selector).click()时,你会找到当时匹配的元素并将处理程序绑定到click事件……当它们的类稍后更改时,这对此无关紧要,处理程序已附加. .live()的工作方式不同,实际上关心事件发生时的选择器匹配.
此外,根据您的示例/您最终会追求的内容,像.toggleClass()这样的内容可能会为您简化,如下所示：
$(function() {
$("img.off,img.on").live('click',function() {
$(this).toggleClass('on off');
alert($(this).attr('class'));
});
});
