Как прослушать элемент в DOM после завершения его ajax-запроса в jQuery?

Question

У меня есть список в WordPress, и каждый раз, когда я щелкаю элемент, который имеет class=woof_radio_label внутри списка, он запускает ajax-запрос.

<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>

Текущий код запроса :

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');

});

Проблема, которую я вижу в приведенном выше коде, заключается в том, что ajaxComplete вызывается для любого элемента, у которого есть запрос ajax. j(document).ajaxComplete() также вызывается даже при загрузке страницы, когда есть сценарии, которые должны выполнять ajax.

Вы знаете, как я могу просто прослушать class="woof_radio_label", который вызвал запрос ajax? Так что я могу выполнить j('#woof_results_by_ajax').addClass('woof-results-sh');

Примечание : У меня нет контроля над запросом ajax, потому что он генерируется сторонним плагином

Answer 1

Мне удалось решить эту проблему с обновленным кодом ниже:

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');
    });
  });
});

Я загрузил ajaxComplete () после определенного действия щелчка. Я не уверен, что это лучший способ, но он подходит для моей ситуации.