如何获得动态创建的值<p>

Question

我<p></p>在jquery中动态创建多个元素.

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