javascript - jQuery .each() 无法在 woocommerce header 购物车列表中找到元素

Question

我试图在 ul 的 li 项目中隐藏“添加到购物车”按钮(此按钮来自插件，而不是 woocommerce)。我为了动态工作而使用的逻辑如下:

jQuery(document).ready(function(){
    jQuery('div[class="lunar_woo_thumb"]').each(function(index,item){
        var prod_id = jQuery(item).data('wid');
        jQuery('a[class="remove"]').each(function(index2,item2){
            var prod_id_2 = jQuery(item2).data('product_id');
            if(prod_id == prod_id_2){
                jQuery(item).find(".addToCartBtn").addClass('hide_it');
            };
        });
    });
 });

如您所见，首先我循环遍历类 lunar_woo_thumb 的所有 div ，并将自定义属性中的值分配给变量 prod_id .

在该循环内，我调用另一个 .each()函数循环遍历类 remove 的所有 a 标签在上面。再次将自定义属性分配给另一个名为 prod_id_2 的变量如果两个变量相等，则添加一个类 hide_it到 .addToCartBtn 查找项目.

我尝试将 DOM html 和 JS 复制到 jsFiddle，逻辑工作正常。

但是当在站点中使用时，内部循环永远找不到 <a>类标签 .remove ，所以它永远不会比较两个变量。

购物车的 HTML 在 devTool 中可见，但在源代码中不可见。

即使我尝试使用 jQuery 做简单的事情，例如将 css 直接更改为 <a> 之一 header 中购物车内的标签永远不会发生。

Answer 1

如果可以在控制台成功运行脚本，那么解决办法是:

使用 jQuery 事件委托(delegate)，.on()将允许您处理尚未创建的后代元素上的事件。

祝你好运