Ajax add to cart is not working after products loaded by other ajax request

Question

I have different ajax based product carousels in my home page

The problem is ajax add to cart is not working on carousel products after products loaded through ajax

Answer 1

In your ajax success function use this code:

jQuery( "form[data-role='tocart-form']" ).catalogAddToCart();

It will reinitialize add to cart

jQuery.ajax({
    url: "/request",
    type: "POST",
    success: function (res) {
        //Other code here

        jQuery( "form[data-role='tocart-form']" ).catalogAddToCart();
    }
});