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

Answer 2

與預加載的元素關聯的事件可以正常工作，但是當您通過AJAX調用動態加載內容時，事件處理程序將不會與它們關聯。 在這種情況下，您可以做的一件事是通過那里的父項將事件附加到DOM元素，頁面加載時可用。

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

確保在頁面加載時，您的parentSelector應該可用。

Answer 3

從jQuery API中 ：

事件處理程序僅綁定到當前選定的元素； 當您的代碼調用.on（）時，它們必須存在於頁面上。 為了確保元素存在並可以選擇，請在文檔就緒處理程序內對頁面上HTML標記中的元素執行事件綁定。 如果將新HTML注入到頁面中，請在將新HTML放入頁面后選擇元素並附加事件處理程序。 或者，使用委托事件來附加事件處理程序，

您需要分別綁定任何新的HTML。 您最初on綁定不適用於新元素。