asked on

Jquery not working when Ajax loads new products

I have a very simple click(function applied to the Add To Cart button below all products that will open the sidebar quick cart view. but that does not work when i use the Category Filter on my products page... when I click a category checkbox (Lips) the products are sorted but my jQuery click function does not work anymore.

Script works fine on this page with no filter: https://allgood.flywheelsites.com/shop/
Soon as I choose a shop by category box the Ajax filter loads the correct products. Example "Lips"

But then my jQuery code does not work... why is that?

jQuery('.product_type_simple').click(function(){
console.log("add to cart btn clicked");
window.setTimeout(function(){jQuery(".elementor-menu-cart__container").addClass("elementor-menu-cart--shown");
}, 1500);
});

Aaron Roessler

ASKER

yay... figured it out.

used this..

jQuery(document).on('click','.product_type_simple', function () {
console.log("add to cart btn clicked");
window.setTimeout(function(){jQuery(".elementor-menu-cart__container").addClass("elementor-menu-cart--shown");
}, 1500);
});

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Aaron Roessler

ASKER

This is a GREAT understandable explanation. which also helped me figure out another issue i had. THANK YOU!

I needed this similar scenario but not using the on click.. but for (on"mouseover"). I tried and it did not work as expected but finally got it working!!
I only need this to fire on my woo shop page, so i checked for specific body class:

if (jQuery('body').hasClass('post-type-archive-product')) {
	jQuery(document).on('mouseover','.jet-woo-products__item', function () {  
		jQuery('.jet-woo-products__item').removeClass('jet-woo-thumb-with-effect');
});	}

Open in new window

Julian Hansen

You are welcome