如何獲得動態創建的價值<p>

Question

我在jquery中動態創建多個<p></p>元素。

var output = '<p>' + results.length + ' matches found</p>';
$.each(results, function (index, result) {
        output += '<p class="'+result.text+'">- ' + result.text + '</p>';
 });
$('#search-output').html(output);

現在，當我單擊<p>元素時，我想要文本值。 我試過像

 $('#search-output').click(function(e){
        var data= $(this).text();
        console.log(data);
        $("#output").text(data);
    })

但是隨后顯示了＃search-output的所有內容。 我想獲取單擊的<p>的值。 任何幫助

Answer 1

了解有關Event delegation

$('#search-output').on('click', 'p', function(e){
    var data= $(this).text();
    console.log(data);
    $("#output").text(data);
});

Answer 2

為了動態創建元素，您需要編輯jquery代碼並在主體上觸發click事件，如下所示

 $('body').on('click','#search-output p',function(e){
    var data= $(this).text();
    console.log(data);
    $("#output").text(data);
})