DOM加載後的jQuery訪問元素

Question

我已經通過innerHTML加載了一些內容。

$('#load-text-button').click(function() { 
     document.getElementById("text-area").innerHTML="Some text <span class="footnote">The Footnote</span> Some other text. 
    }); 

現在我想訪問新創建的跨度（一類「腳註」的）被點擊了「粗體腳註按鈕」的時候。腳註按鈕在文檔加載時加載，但文本在DOM加載後加載。

$('#bold-footnote-button').click(function() { 
     $(".footnote").addClass('bold'); 
    }); 

無法找到「.footnote」元素。我讀過的所有內容都指向使用.live方法，但文檔聲稱它現在已被棄用。如何直接訪問新的「.footnote」元素而不必直接點擊它？

Answer 1

點擊功能應該可以正常工作，因爲您不是針對新插入的元素與事件處理程序，而是在事件處理程序中。該問題可能是，沒有這樣的元素插入你有與引用的一些問題，做它像這樣：

$('#load-text-button').click(function() { 
    $("#text-area").html('Some text <span class="footnote">The Footnote</span> Some other text.'); 
}); 

Answer 2

，也許我失去了一些東西，但如果你改變了第一次點擊您的HTML（）的時候你問$（「。腳註」）你應該找到新創建的跨度。有時DOM修改和DOM查詢之間存在延遲問題，但只有當您一個接一個地說明您的語句時纔會遇到這些問題。在你的情況下，當用戶轉到＃bold-footnote-button時，瀏覽器總是有更新的時間。也許問題在於你在第一個例子中對字符串和class屬性使用雙引號。

使用您的瀏覽器開發工具，如果它正確地獲取類屬性