jQuery:通过 .addClass() 或 .attr() 更改类后按类选择

Question

我有一些类似这样的 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 项将不会响应使用其新类的选择器。

也就是说，运行上面的代码，如果点击'off'img，就会触发第一个函数，并将类更改为'on' 。但是，再次单击此图像不会触发第二个功能(正如我所期望的)，而是再次触发第一个功能。 就好像选择器正在读取旧的 DOM 而不是更新的版本。我在这里做错了什么？

Firefox 3.6.3 - jQuery 1.4.2

Answer 1

您可以使用.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()时，您将找到当时匹配的元素，并将处理程序绑定(bind)到click event...当他们的类稍后更改时，这并不重要，处理程序已附加。 .live() 的工作方式不同，实际上关心的是事件发生时匹配的选择器。

此外，根据您的示例/您最终想要的内容，例如 .toggleClass()可能会为您简化它，如下所示:

$(function() {
  $("img.off, img.on").live('click', function() {
    $(this).toggleClass('on off'); 
    alert($(this).attr('class'));
  });
});