用于 JS 动态条目的引导工具提示和弹出框答案

【问题标题】：Bootstrap tooltips and popover for JS dynamic entries用于 JS 动态条目的引导工具提示和弹出框
【发布时间】：2014-04-26 19:32:05
【问题描述】：

Bootstrap 3 tooltips 和 popovers 在 html 代码中完美运行，但它似乎不适用于动态构建的条目。例如：

urlline += '<a href="' + this + '" target="_blank" ';
urlline += 'data-content="' + ircline + '" ';
urlline += 'data-placement="bottom" ';
urlline += 'data-container="body" ';
urlline += 'data-toggle="popover">';
urlline += this + '</a>';

在这种情况下，创建的链接上的hover 不会显示任何popover。与tooltips 的结果相同。我用$('[data-toggle="popover"]').popover({trigger: 'hover'}); 初始化了popover，它适用于现有的HTML，但不适用于动态创建的条目。

我不是 JS 专家，所以我可能会遗漏一些东西，有什么提示吗？

【问题讨论】：

标签： javascript twitter-bootstrap popover

【解决方案1】：

您是否使用 jQuery 将 urlline 插入 DOM，例如 $('#somelementID').html(urlline); ？如果是，则在使用 jquery 将该元素插入 DOM 后，使用 $('a#id').popover({trigger: 'hover'});

初始化引导弹出框/工具提示

【讨论】：

已经这样做了，不幸的是它没有改变任何东西，添加了一个 id 到 a 组件然后$('#a-' + urldate).popover({trigger: 'hover'});，仍然没有弹出窗口.. .
似乎这一切都与页面尚未准备好有关。我添加了一个 setInterval() 函数并在其中有一个 popover() ，结果是时间到了，就会发生弹出窗口。我会挖掘这个并发布结果。
所以这似乎是等待元素完全加载的问题，这段代码就成功了：$.ajaxSetup({ async: false }); getJSON 获取的所有元素随后会同步获取，不再存在竞争条件。

【解决方案2】：

尝试在 js 中使用带有弹出框属性的函数，即使在您的内容中，您也可以使用 ajax 或根据需要放置 html 代码或 finally 参数（这在数据表中对我有用）：

function popovers(object, title, content, placement){
    $(objet).popover({
      html:true, 
      title: title,
      content: content,
      placement: placement
})
}

【讨论】：