jquery AJAX and event handlers

Question

I have found a few threads in here regarding event handlers and event delegation in regards to content loaded dynamically with ajax.

I have a project where we load a form from an external resource. this has to be done using ajax, but we need to detect the click event on some html elements.

Normally we attach the event delegation to the closest static element, but since this is the actual empty container for the code, we are unable to target the elements inside it.

    jQuery(function(){
            console.log(jQuery('#feedbackCollect-form-container'));
            jQuery('.form-item.form-item-field-fc-found-data-und.form-type-radio.radio').on('click', '#feedbackCollect-form-container',function(){
            jQuery('.form-item.form-item-field-fc-found-data-und.form-type-radio.radio').removeClass('feedback-active');
            jQuery(this).addClass('feedback-active');
            });
    });

How do I solve this issue?

Answer 1

Attach the event listener to the body tag:

jQuery(function(){
            jQuery('body').on('click', '#feedbackCollect-form-container',function(){
            jQuery('.form-item.form-item-field-fc-found-data-und.form-type-radio.radio').removeClass('feedback-active');
            jQuery(this).addClass('feedback-active');
            });
    });