关于 jquery:Bootstrap Tooltip 不适用于动态生成的行


Bootstrap Tooltip not working for dynamically generated rows

本问题已经有最佳答案，请猛点这里访问。

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

这是我的桌子

1
2
3
4
5
6
7
8
9
10
<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

1
2
3
4
5
6
7
8
9
10
11
12
$('.tableContent').popover({
                container: 'body',
                placement: 'left',
                trigger: 'hover'

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

            });

工具提示出现在 <th></th> 但不在 <td></td>
是因为它的动态如何解决吗？

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

时 DOM 元素不存在

1
.popover({...})

函数被调用。

解决方案：

你需要做的是调用，

1
.popover()

当您将鼠标悬停在元素上时的功能。

1
2
3
4
5
6
7
8
9
10
$('body').on('mouseenter', '.tableContent', function () {
    if ($(this).attr('data-toggle') != 'popover')
    {
        $(this).popover({
            container: 'body',
            placement: 'left',
            trigger: 'hover'
        }).popover('show');
    }
});

解释

当鼠标悬停在您的元素上时，会检查是否已添加数据切换，如果尚未添加，则调用 .popover() 函数添加数据切换以及 popover(\\' show\\') 被调用以在第一次悬停时实际显示该项目。

此后，popover 功能应该可以在悬停时正常??工作。

希望有帮助。快乐编码。

相关讨论