jquery - 为什么在我更改图像的 src 后事件处理程序不起作用？

Question

$('#cherub_sub1_plus').one("click",function(event){
event.preventDefault();
$(this).addClass("cross");
$(this).attr("src","new_image.png");
});

$('.cross').on("click",function(){
// nothing will execute here because I've changed the src
});

这很奇怪。每当您更改图像的 src 时，所有事件处理程序也会被删除。

Answer 1

这不是因为您更改了源代码，而是因为您动态添加了一个类，并且该事件处理程序是在运行时注册的。利用.on()

$(document).on("click", ".cross", function(){
    // nothing will execute here because I've changed the src
});

Answer 2

尝试像这样重组您的代码：

$('#cherub_sub1_plus').on("click",function(e){
    var $this = $(this);
    e.preventDefault();

    if($this.hasClass('cross')){
        // do your magic
    } else {
        $this.addClass('cross').get(0).src = 'new_image.png';
    }
});

这样，它将检查该类是否存在，如果存在则执行一些魔术，否则添加该类并更改图像的 src。它还将其整合到一个单击处理程序中，该处理程序不需要$(document)级别单击事件（从性能角度来看成本很高）。

src出于性能原因，我还链接了您的分配并使用了 vanilla JS 方法。忍不住自己。