javascript - 如何对具有从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>