jQuery产品筛选多次操作后addToWishlist失效 如何修改div不丢原有HTML

• 你当前的筛选逻辑是直接通过html()方法全量替换#product-items容器内的内容，每次替换时都会先清空容器内所有原有DOM节点，同时销毁这些节点上绑定的所有事件、存储的jQuery数据，即使你提前把节点存在数组里，插入后原有绑定也会丢失。
• 如果你是直接通过$('.addToWishlist').click(function(){})这类写法绑定的点击事件，只有页面初始化时存在的.addToWishlist元素会绑定事件，后续替换插入的新元素不会自动继承绑定，自然点击无响应。

直接通过元素显示隐藏实现筛选，完全不需要修改DOM结构，原有所有绑定都不会失效，还可以完全删除你原有代码中提前遍历存productArray的逻辑，代码更简洁性能更好，修改后代码如下：

$(".filter-btn").click(function(e) {
    const btnId = e.target.id;
    // 匹配筛选对应的商品类型
    const targetType = btnId === "fairness-soaps" ? "Fairness" 
        : btnId === "deep-clean-soaps" ? "Deep-Clean"
        : btnId === "skin-whitening-soaps" ? "Skin-Whitening"
        : "";
    // 遍历所有商品项，符合条件显示，不符合隐藏
    $("#product-items .col-4").each(function() {
        const currentType = $(this).find('.addToWishlist').data("type");
        $(this).toggle(currentType === targetType);
    });
});

如果你确实需要动态插入/移除DOM节点，只需要修改addToWishlist的事件绑定方式为事件委托，绑定到不会被销毁的父级容器上即可：

// 把你原来直接绑定到.addToWishlist的逻辑替换成下面的写法即可
$('#product-items').on('click', '.addToWishlist', function() {
    // 你的愿望单原有逻辑不需要修改
    const productId = $(this).data('id');
    // 其余原有逻辑...
})

该方案下你原有筛选逻辑可以保留，不管#product-items内的元素怎么替换，点击事件都会正常触发。

内容的提问来源于stack exchange，提问作者Safina Siddique