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.