【问题标题】：Setting data-content of Bootstrap popover doesn't work设置 Bootstrap 弹出框的数据内容不起作用
【发布时间】：2017-07-17 23:12:37
【问题描述】：

我定义了一个 Bootstrap 3 弹出框，用于在单击表格单元格中的图标时显示。页面加载时动态插入表格行。我的 jQuery 使用 Ajax 调用来获取弹出框的内容。当弹出框显示时，它的标题是由它的内容是空的。

这是相关的html：

<td>1-Year Individual <a tabindex="0" class="history-info" data-trigger="focus" data-memberid="123" data-toggle="popover" data-placement="left" data-title="Membership history for Fred Smith" data-html="true" data-content=""><span class="glyphicon glyphicon-info-sign" style="color:grey;"></span></a></td>

如您所见，data-content 属性设置为空。

这是我的 javascript。

$("#member-table .history-info").on("show.bs.popover", function () {
var memberid=$(this).data("memberid");
$.ajax({
    url: "memberships-GetHistoryInfo.php",
    type: "GET",
    data: {MemberID: memberid},
    datatype: "html",
    async: false,
    success: function (data) {
        $(this).data("content",data);
    }
});

})

我已经验证了 $(this).data("content",data); 之后的警报。数据内容设置为预期值的行，但弹出窗口中除了标题外没有任何显示。

选择器中的member-table是除了标题之外的表的id。

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

jquery.data() API 为元素设置数据，但被 jQuery 抽象出来并位于 DOM 之上的一层。我会考虑用$(this).attr('data-content', data);添加属性

【讨论】：

感谢您的建议，但不幸的是，它没有任何区别。
啊，我查看了弹出框的引导文档，在我的浏览器控制台中使用 jQuery 抓取示例中的元素，并将 data-content 属性更改为 attr()，单击按钮，内容有更改为我设置的内容 - 也许您必须在 show.bs.popover 触发之前设置内容？从getbootstrap.com/javascript/#popovers 的.popover('show') 方法文档看来，这就是它检查内容的重点。相反，在页面加载时，您是否可以通过 ajax 获取所有弹出框的数据并遍历结果并将数据属性添加到所有行？
我在您提供的链接中找不到 jQuery popover 示例，也许我只是错过了它。我最初是在页面加载时为每个图标创建数据内容，但由于表中的行数和所需的数据库访问，性能不是很好。我希望通过仅在单击图标时动态创建数据内容来提高性能。
如果你向下滚动一点，就会看到一个红色的大按钮，上面写着“单击以切换弹出窗口”。您使用什么来构建表格的标记？大概您必须在数据集上循环 - 您可以在数据中包含文本并同时添加数据内容属性吗？
一直在尝试其他一些事情。还没有运气，但肯定有一些奇怪的事情发生。我向显示弹出框的图标添加了一个 id，并添加了命令 alert($(this).attr("id"));就在我设置数据内容之前 - 它返回未定义。好像 $(this) 没有指向正确的元素，尽管它在脚本的前面获得了 data-memberid 的正确值。我将尝试您使用 show 方法的建议。

【解决方案2】：

在尝试解决 Bootstrap 4 中的类似问题时遇到了这个老问题。

我解决了我的问题，方法是将显示弹出框的那一刻和我更新其中一些的那一刻分开，这必须是在弹出框到达/在 DOM 内实例化之后。分离命令对我来说已经足够了。

在 OP 中还有另一个问题：Ajax 请求返回 a promise。如果您尝试立即使用数据，那么您的代码会比承诺的运行速度更快，将没有可用的数据。

在 Promise 的末尾使用 .then 就足以让您的代码等待数据可用，例如：

$.ajax({
    ...
}).then( data => {
    // do something with the received data
});

上面的链接提供了一些示例，但 promise 是一个相当广泛的主题，值得花一些时间来理解它们。

干杯

【讨论】：