Ajax Complete appends Jquery twice-CodePudding

I have a simple ajax complete call. It's supposed to append some text after an ajax load is complete. It works minus the fact that sometimes it displays the information two or more times. I think I need to include something, but I am not quite sure.

Should I make the jQuery into a function and have called once ajax is done? Any suggestion would be great.

Here is an example of how it's deployed on a site I am developing https://dev.staging.idgadvertising.com/sgwcorp/products

here is my code

jQuery(document).ajaxComplete(function($) {
  jQuery('.woof_container_inner_shade').append('<div >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 >Everlast</div>');
    }

    if (jQuery(this).hasClass('product_cat-tigerturf')) {
      jQuery(this).find('a.product-images').append('<div >TigerTurf</div>');
    }
  });
});

CodePudding user response：

one thing you can do is look to see if it has already ben appended before possibly re-appending. there's a couple ways this can be checked... Here's one possible way:

jQuery(document).ajaxComplete(function($) {
  jQuery('.woof_container_inner_shade').append('<div >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('.prodBadge').length) {
      jQuery(this).find('a.product-images').append('<div >Everlast</div>');
    }
    ...
  });
});