How to listen to an element in the DOM after its ajax request completes in jQuery?

Question

I have a list in WordPress and every time I click the element that has a class=woof_radio_label inside the list it will trigger an ajax request.

<ul class="woof_list woof_list_radio">
   <li class="woof_radio_label"><label class="woof_radio_label">Product 1</label></li>
   <li class="woof_radio_label"><label class="woof_radio_label">Product 2</label></li>
   <li class="woof_radio_label"><label class="woof_radio_label">Product 3</label></li>
</ul>

Current jquery code :

var j = jQuery.noConflict();
j(function() {

    j(document).on('click', '.woof_list_radio > li .woof_radio_label', function(e) {


    });

});


j(document).ajaxComplete(function() {

    j('#woof_results_by_ajax').addClass('woof-results-sh');

});

The problem that I see with the code above is that ajaxComplete is called for any element that has an ajax request. j(document).ajaxComplete() is also called even on page load when there are any scripts that must execute ajax.

Do you know how can I just listen to class="woof_radio_label" that triggered an ajax request? So I can execute j('#woof_results_by_ajax').addClass('woof-results-sh');

Note : I don't have control to the ajax request because it is generated a by a 3rd party plugin

Answer 1

I was able to solve this issue with the updated code below:

var j = jQuery.noConflict();
j(function() {
  j(document).on('click', '.woof_list_radio > li .woof_radio_label', function(e) {
    j(document).ajaxComplete(function(){
      j('#woof_results_by_ajax').addClass('woof-results-sh');
    });
  });
});

I loaded the ajaxComplete() after a particular click action. I'm not sure if this is the best way but it works for my situation.