ajaxComplete多次激活 - woocommerce加入购物车

Question

I am trying to make an alert window fire when adding specific products to cart in WooCommerce. For this I am adding a click function to the add to cart button, that fires on ajaxComplete. However, the ajaxComplete seems to make it fire multiple times. How can I prevent this?

jQuery('#bvbutton').click(function() {
  jQuery( document ).ajaxComplete(function() {
    alert("testing!");
  });
});

EDIT: Per request here is a more thorough explanation: The ajax call is made from within WooCommerce and I would prefer not editing this. What I am trying to do is giving the buttons of the specific products a unique id, and making a click on a button with this id trigger an alert box.

The whole point is that items from within in a specific category, a, is supposed to give 10 % percent discount on products from category b. When adding a product from category a, the alert box is supposed to fire and inform about discount on category b. Hence I give these buttons a specific id, and would like to make a click event targeting these id's. When clicked, I need to await the ajax call that adds item to cart and then fire alert box.

Hope it makes sense now

Answer 1

$.ajaxComplete is global. This handler will be added to all AJAX requests as many times as is called. In your case each time #bvbutton is clicked a another handler instance is added globally.

Instead, add the handler once in the DOM ready event. Not on any specific click events.

$(function() {
  jQuery( document ).ajaxComplete(function() {
    alert("testing!");
  });
});

Answer 2

Personally I wouldn't do it this way as this will affect all AJAX operations that you do. I would be more inclined to use trigger to fire a custom event when that particular AJAX process is successful. That way you can be more precise as to when your alert goes off. Here's an example:

jQuery(document).on('product-added', function () {
  console.log('Product added');
});

jQuery('#bvbutton').click(function() {
  jQuery.ajax({
     url: endpoint,
     type: 'POST',
     ...
   }).success(function (data) {
     // process data
     jQuery(document).trigger('product-added');
   });
});