对于动态插入的元素，类选择器不会在jquery中触发单击事件

Question

我有一个侧边栏，其中包含生成的div列表，每个div都有一个包含字体名称的p标签。我试图在p标签中获取文本。出于某种原因，我的代码不适用于动态添加的元素，但它适用于我尝试过的其他元素。

HTML（模板）

var content = '<div class="trending-font d-flex w-100 justify-content-between list-group-item"><p>' + item.family + '</p><small>' + item.lastModified + '</small></div>';

JS

$('.trending-font').click(function () {
    var $sideBarFont = $(this).find('p').text();
    console.log($sideBarFont);
});

当我运行它时，没有任何错误，页面上没有任何内容被破坏，它只是没有返回被点击的div内的文本。

Answer 1

您需要委派该事件，因为div即时附加到DOM。

$(document).on('click', '.trending-font', function () {
    var $sideBarFont = $(this).find('p').text();
    console.log($sideBarFont);
});

＆＃13;

＆＃13;

$(document).on('click', '.trending-font', function () {
    var $sideBarFont = $(this).find('p').text();
    console.log($sideBarFont);
});

var content = '<div class="trending-font d-flex w-100 justify-content-between list-group-item" ><p> family 1 </p><small> Jan 3, 2018</small></div>';

$('#c').append( Array(5).join(content) );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="c"></div>

＆＃13;

＆＃13;

＆＃13;