Question

假设我想在加载包含的图像时更改容器的类，可能是这样的：

$('.image').load(function(){
    $(this).parents('.image-wrapper').removeClass('image-wrapper').addClass('image-wrapper-new');
});

...然后添加一个click事件，引用新添加的类，如下所示：

$('.image-wrapper-new').click(function(){
    //Do stuff
});

我尝试过类似的东西，没有成功。我错过了什么吗？

使用Developer Tools，浏览器似乎将其呈现为.image-wrapper-new，但由于它在物理代码中保留了.image-wrapper类，因此Jquery / JS并不尊重它。这可能吗？

感谢。

-Ryan

Answer 1

修复语法错误：

$('.image').load(function(){
    $(this).parents('.image-wrapper').removeClass('image-wrapper').addClass('image-wrapper-new');
});

我还建议使用.on()而不是.click()，这样每次更改类时都不必重新绑定事件处理程序：

$(document).on('click', '.image-wrapper-new', function(){
    //Do stuff
});

Answer 2

你应该使用.live（'click'，function（）{}）;由于您正在更新DOM。 .click（）不会自动获取新数据。如果您正在构建一个ajax应用程序，那么这应该是标准的imo

Answer 3

只需在更改类时添加单击事件处理程序：

$('.image').load(function(){
    $(this).parents('.image-wrapper')
           .removeClass('image-wrapper')
           .addClass('image-wrapper-new')
           .click(function(){
               //Do stuff
            });
});

JS / Jquery：单击AddClass之后的事件

3 个答案: