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()时，您会找到与当时相匹配的元素并将处理程序绑定到click事件...当他们的班级稍后更改时对此无关紧要，处理程序已附加。 .live()的工作方式不同，实际上关心选择事件匹配时事件发生。

此外，根据您的示例/您最终会使用的内容，.toggleClass()之类的内容可能会为您简化，例如：

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

Answer 2

尝试 live() ：

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

Answer 3

您需要在更改课程后重新绑定点击回调，或使用.live()

jQuery：通过.addClass（）或.attr（）在类更改后按类选择

3 个答案: