Ajax Complete回调重复追加内容，寻求前端解决方法

你的问题根源在于ajaxComplete是全局Ajax事件监听，页面上每一次Ajax请求完成都会触发这个回调函数。而你的代码每次触发都直接执行append操作，没有做任何重复判断，所以多次Ajax触发后就会重复添加元素。

下面是几种可行的解决方案：

方案1：检查元素是否已存在，避免重复添加 #

对于静态容器（比如.woof_container_inner_shade），可以先判断目标元素是否存在，不存在再执行追加；对于动态加载的产品，给已处理过的产品添加标记类，跳过重复处理。

修改后的代码示例：

jQuery(document).ajaxComplete(function() {
  // 处理说明文本：仅在容器内无该元素时添加
  const $shadeContainer = jQuery('.woof_container_inner_shade');
  if (!$shadeContainer.find('.smalldesc').length) {
    $shadeContainer.append('<div class="smalldesc">1=Lightest 6=Darkest,7=Multicolor</div>');
  }

  // 处理产品徽章：跳过已处理的产品
  jQuery('.woof_shortcode_output .products .product').each(function() {
    const $product = jQuery(this);
    if ($product.hasClass('badge-processed')) return;

    if ($product.hasClass('product_cat-everlast')) {
      $product.find('a.product-images').append('<div class="prodBadge">Everlast</div>');
    }
    if ($product.hasClass('product_cat-tigerturf')) {
      $product.find('a.product-images').append('<div class="prodBadge">TigerTurf</div>');
    }

    // 标记为已处理，避免重复执行
    $product.addClass('badge-processed');
  });
});

方案2：仅监听特定的Ajax请求 #

如果只有特定的Ajax请求（比如产品筛选加载）需要执行这段逻辑，可以通过判断请求的URL或参数，只在目标请求完成时执行代码，减少不必要的触发：

jQuery(document).ajaxComplete(function(event, xhr, settings) {
  // 根据实际请求特征调整判断条件，比如包含产品筛选的参数
  if (settings.url.includes('products') || settings.data?.includes('woof')) {
    // 这里放你的处理逻辑（同样建议加上方案1的重复判断）
    const $shadeContainer = jQuery('.woof_container_inner_shade');
    if (!$shadeContainer.find('.smalldesc').length) {
      $shadeContainer.append('<div class="smalldesc">1=Lightest 6=Darkest,7=Multicolor</div>');
    }

    jQuery('.woof_shortcode_output .products .product:not(.badge-processed)').each(function() {
      const $product = jQuery(this);
      if ($product.hasClass('product_cat-everlast')) {
        $product.find('a.product-images').append('<div class="prodBadge">Everlast</div>');
      }
      if ($product.hasClass('product_cat-tigerturf')) {
        $product.find('a.product-images').append('<div class="prodBadge">TigerTurf</div>');
      }
      $product.addClass('badge-processed');
    });
  }
});

方案3：仅绑定一次事件（慎用） #

如果你的页面只需要执行一次这段逻辑（比如仅首次加载后处理），可以用one()方法绑定ajaxComplete，这样事件只会触发一次：

jQuery(document).one('ajaxComplete', function() {
  // 你的处理逻辑
  jQuery('.woof_container_inner_shade').append('<div class="smalldesc">1=Lightest 6=Darkest,7=Multicolor</div>');
  jQuery('.woof_shortcode_output .products .product').each(function() {
    if (jQuery(this).hasClass('product_cat-everlast')) {
      jQuery(this).find('a.product-images').append('<div class="prodBadge">Everlast</div>');
    }
    if (jQuery(this).hasClass('product_cat-tigerturf')) {
      jQuery(this).find('a.product-images').append('<div class="prodBadge">TigerTurf</div>');
    }
  });
});

注意：这个方案只适合不需要重复处理Ajax请求的场景，如果页面有多次产品加载（比如筛选、分页），会导致后续Ajax完成后不再执行逻辑。

内容的提问来源于stack exchange，提问作者Jason Ayala