javascript - 类选择器不会在 jquery 中为动态插入的元素触发 click 事件

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

您需要委托(delegate)该事件，因为 div 会动态附加到 DOM。

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

$(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) );

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