使用jQuery后if语句如何破解？

Question

I have an ajax list in WordPress. Everytime I click one of the links there will be an ajax request to filter products.

I want to toggle the addClass and removeClass every time a link from the list is click toggled.

My script below only works only on ajaxComplete

j( document ).ajaxComplete(function() {

  j('.woof_radio_label').click(function(myEvent) {
    if(j(this).siblings('.woof_radio_term').is(':checked')) {
      j('.page-content-wrap').removeClass('open');
      j(this).siblings('.woof_radio_term_reset').click();
    } else {
      j('.page-content-wrap').addClass('open');
    }
  });

});

When I hit the if condition, it executes the else statement on the website. Do you know what code can i put so that else statement won't execute?

Any idea is appreciated. Thanks

Answer 1

I was able to solve issue by binding an event to a .on() method. It works even for elements that were created dynamically.

The code below is now executed inside document ready and not inside ajaxComplete

j(document).on('click', '.woof_sid_woof-categories .woof_list_radio > li > .woof_childs_list > li > .woof_childs_list > li .woof_radio_label', function(e) {
    if(j(this).siblings('.woof_radio_term').is(':checked')) {
      j('.page-content-wrap').removeClass('open');
      j(this).siblings('.woof_radio_term_reset').click();
    } else {
      j('.page-content-wrap').addClass('open');
    }
});