jquery - Bootstrap 工具提示不适用于动态生成的行

Question

这个问题已经有答案了:

How to bind bootstrap popover on dynamic elements (6 个回答)

已关闭 7 年前。

我有一个表，其中的行是动态生成的。我必须添加tooltip到所有动态生成的行中的单元格之一。 tooltip正在为 <th></th> 工作但不适用于<td></td>

这是我的 table

<table>
  <thead>
    <tr><th id="table-head" data-toggle="popover" data-trigger="" data-content="Sample Tootlip">Table Head</th></tr>
  </thead>
<tbody>
<tr data-ng-repeat="item in Samplelist">
<td class="tableContent" data-toggle="popover" data-trigger="" data-content="Content Tootlip">{{item.value}}</td>
</tr>
</tbody>
</table>

这是 JQuery

$('.tableContent').popover({
                container: 'body',
                placement: 'left',
                trigger: 'hover'

            });
$('#table-head').popover({
                container: 'body',
                placement: 'left',
                trigger: 'hover'

            });

工具提示出现在<th></th>中但不在 <td></td> 中难道是因为它的动态性怎么解决呢？

Answer 1

您的假设是正确的，问题是因为行是动态创建的。所以当

时 DOM 元素不存在

.popover({...})

调用函数。

解决方案:

您需要做的是调用，

.popover()

当您将鼠标悬停在元素上时起作用。

$('body').on('mouseenter', '.tableContent', function () {
    if ($(this).attr('data-toggle') != 'popover')
    {
        $(this).popover({
            container: 'body',
            placement: 'left',
            trigger: 'hover'
        }).popover('show');
    }
});

说明

当鼠标悬停在元素上时，将检查是否已添加 data-toggle，如果尚未添加 .popover() 函数称为添加数据切换，并且还调用popover('show')以在第一次悬停时实际显示该项目。

此后，弹出窗口功能应该在悬停时正常​​工作。

希望有帮助。快乐编码。