我有一个侧边栏,其中包含生成的 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 内的文本。
最佳答案
您需要委托(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>
关于javascript - 类选择器不会在 jquery 中为动态插入的元素触发 click 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48256278/