jQuery not affecting content loaded by AJAX

Question

I have a div element, which when clicked will toggle a class on it's parent.

$('.q-header').on('click', function() {
    $(this).parent('.question-wrap').toggleClass('miniturised');
});
// the 'miniturised' class hides child elements.
// therefore when q-header is clicked the child elements are toggled

I have a button on my site, when clicked, it will load one of the aforementioned div elements to the site via AJAX.

$('#addqs').on('click', function() {
    var response;
    $.ajax({ type: "GET",   
         url: "./qt-single-line.html",   
         async: false,
         success : function(text)
         {
             response = text;
         }
    });
    $('#final-row').before(response);
    return false;
});

The divs loaded via AJAX are unaffected by the first function which toggles the class 'miniturised'. Why is the new AJAX content not affected by my JS?

Edit: The HTML element looks like so

<div class="question-wrap miniturised">
    <div class="q-header">
        <span></span>
    </div>
    <div class="q-body">
    </div>
</div>

On a normal DOM element, when I click q-header, miniturise is toggled. This doesn't work on dynamic elements, I know this. I want to know how to solve this, please.

Can you show the html ? "Events are attached to elements present in DOM, not to the content generated dynamically." — Jashwant, Sep 15 '14 at 20:52
Using `async: false` is dangerous and unnecessary, unless you really know what you're doing. — Terry, Sep 15 '14 at 21:18
When it's set to true, my content doesn't appear. Is there a way around this? I want to load my content before the selector '#final-row' — nonsequiter, Sep 15 '14 at 21:25

score 1 · Accepted Answer · answered Sep 15 '14 at 20:54

1

Your newly created element is not already in the dom.

try:

$(document).on('click', '.q-header', function() { 
    $(this).parent('.question-wrap').toggleClass('miniturised');
 });

answered Sep 15 '14 at 20:54

derdida

14,784
16
90
139

This didn't seem to work for me. My class already existed on previous elements, if that helps. – nonsequiter Sep 15 '14 at 20:59
1

@nonsequiter Toggle class should detect the class and remove in that case, is this method working for elements that already exist? – Sep 15 '14 at 21:26
1

Here is a jsfiddle showing that derdida's solution should work: http://jsfiddle.net/fa7L9yty/ – Sep 15 '14 at 21:32
Thanks for clarifying. I guess that the only difference between your fiddle and the actual site, is that the site is loading content via the .ajax function as opposed to a string in a variable. Possibly a problem my usage of the function? – nonsequiter Sep 15 '14 at 21:39

score 1 · Answer 2 · answered Jan 20 '17 at 12:44

Events associated with pre-loaded elements works fine, but when you content is loaded dynamically via AJAX calls event handlers are not associated with them. One thing that you can do in this case is attach event to DOM elements via there parents which is available on page load.

$("parentSelect").on('click', 'childSelector', function() {
  // Do this on click.
});

Make sure one thing that you parentSelector should be available at the time of page load.

EHorodyski · Answer 3 · 2014-09-15T21:16:38.187

From the jQuery API:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler,

You'll need to bind any new HTML seperately. Your initial on binding doesn't apply to new elements.

jQuery not affecting content loaded by AJAX

3 Answers3