Question

我在使用Bootstrap 4弹出窗口时遇到了麻烦。

我的页面上有几个div，每个div都包含一个弹出框的内容，例如

<div class="d-none" id="popover-content-cld">
<p>An infant is considered to have Chronic Lung Disease (CLD): [...]</p>
</div>

当用户单击例如此链接时，应使用此弹出窗口：

<a tabindex="0" role="button" href="#" id="cld.210" 
 data-toggle="popover" data-trigger="focus" 
 title="Chronic Lung Disease (CLD)" 
 data-content="No additional information found, please contact support."> 
 <i class="fa fa-info-circle text-black-50" aria-hidden="true"></i></a>

我在页面上有几个实例应使用相同的弹出框。它们都以相同的前缀开头，后跟一个句点，后跟一个唯一的数字，从而使每个带有弹出窗口的标签的ID都唯一。我有一个默认的数据内容消息，该消息用在标记上，如果可用，应将其替换为内容更多的消息。

要更新弹出框的内容，我正在使用以下功能，该功能在页面加载时会调用：

$("[data-toggle=popover]").each(function(i, obj) {
  $(this).popover({
    html: true,
    content: function() {
      var id = $(this).attr('id').split(".");
      return $('#popover-content-' + id[0]).html();
    }
  });
});

调试器显然会遍历应该在页面上具有弹出框的每个元素的功能。弹出内容也可以正确提取。但是，我的弹出窗口的内容从未更改为默认值。

我想念什么？

Answer 1

我能够通过显示弹出窗口内容之前触发的函数来获得所需的工作：

$('a[data-toggle="popover"]').on('show.bs.popover', function () {
  var id = $(this).attr('id').split(".");
  $(this).attr('data-content', $('#popover-content-' + id[0]).html());
});

Bootstrap 4将弹出窗口的内容设置为div的内容

1 个答案: