javascript - jQuery 不影响 AJAX 加载的内容

Question

我有一个 div 元素，单击该元素时将在其父元素上切换一个类。

$('.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

我的网站上有一个按钮，单击时，它将通过 AJAX 将上述 div 元素之一加载到网站。

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

通过 AJAX 加载的 div 不受第一个切换类“小型化”的函数的影响。为什么新的AJAX内容不受我的JS影响？

编辑:HTML 元素看起来像这样

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

在普通 DOM 元素上，当我单击 q-header 时，会切换小型化。这不适用于动态元素，我知道这一点。我想知道如何解决这个问题，谢谢。

Answer 1

您新创建的元素尚未在 dom 中。

尝试:

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