如何對從Ajax動態添加的具有相同類的元素執行操作？

Question

我使用Ajax從數據庫獲取一些數據，從該Ajax請求返回的數據：

<p class="fetchedData">First Result</p>
<p class="fetchedData">Second Result</p>
<p class="fetchedData">Third Result</p>
<p class="fetchedData">Fourth Result</p>

單擊該如何獲取每個p元素內的文本？

就像單擊<p class="fetchedData">Fourth Result</p>我得到“第四結果”。

我試過了

var eachData $('.fetchedData').each(function(){
    $(this).on('click' , function(){
        console.log( $(this).text() );
    })
});

和

var allData = document.querySelectorAll('#fetchedData');
allData.forEach(function(el){
    console.log( $(this).text() );
}

但是他們都沒有工作。

我也嘗試過

$(document).on('click','.fetchedData' , function () {
    console.log( $(this).text() );
})

但這僅適用於第一個元素。

Answer 1

 $(document).ready(function() { $(document).on('click', '.fetchedData', function() { console.log($(this).text()); }) $.each(['First', 'Second', 'Third', 'Fourth'], function(index, value) { $('body').append(`<p class="fetchedData">${value} Result</p>`); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

您需要刪除var eachData並僅使用jQuery每個add click事件

$('.fetchedData').each(function(){
    $(this).on('click' , function(){
       console.log( $(this).text() );
    })
});

Answer 3

http://api.jquery.com/html/

使用.html（）單擊上面的鏈接以供參考

否則使用document.getElementByClassName("className").value

Answer 4

如果每個數據都具有相同的類，則無需使用each循環。 您可以直接在.fetchedData類上應用click事件。

$('.fetchedData').on('click', function(){
    console.log($(this).text());
})