如何更新引导弹出框文本？

Question

我正在使用 bootstrap-popover 在元素旁边显示一条消息。

如果我想在第一次之后在弹出窗口中显示不同的文本，文本不会改变。使用新文本重新实例化弹出框不会覆盖。

查看这个 js fiddle 以获得一个实时示例：

http://jsfiddle.net/RFzvp/1/

（第一次点击后alert中的消息和dom中的消息不一致） 该文档对如何解除绑定有点简单：http://twitter.github.com/bootstrap/javascript.html#popovers

我用错了吗？关于如何解决的任何建议？

谢谢

Answer 1

您可以像这样使用 jquery 数据闭包字典直接访问选项：

$('a#test').data('bs.popover').options.content = 'new content';

即使在第一次初始化弹出框之后，此代码也应该可以正常工作。

Answer 2

您好，请在此处查看工作 demo：http://jsfiddle.net/4g3Py/1/

我已进行更改以获得您想要的结果。 :)

我认为您已经知道自己在做什么，但我的一些示例建议如下：http://dl.dropbox.com/u/74874/test_scripts/popover/index.html# - 如果您会看到源通知，请分享此链接以让您了解具有不同弹出窗口的不同链接data-content 属性，但您想要通过以下更改工作。

祝你愉快，希望对你有所帮助。 D'uh 不要忘记投票并接受答案:)

Jquery 代码

var i = 0;
$('a#test').click(function() {
    i += 1;

    $('a#test').popover({
        trigger: 'manual',
        placement: 'right',
        content: function() {
           var message = "Count is" + i;
             return message;
        }
    });
    $('a#test').popover("show");

});​

HTML

<a id="test">Click me</a>
​

Answer 3

以防万一有人在寻找不涉及重新实例化 popover 并且只想更改内容 html 的解决方案，请查看以下内容：

$('a#test').data('popover').$tip.find(".popover-content").html("<div>some new content yo</div>")

更新：在编写此答案和 Bootstrap 3.2.0（我怀疑是 3.0？）之间的某个时间点，这发生了一点变化：

$('a#test').data('bs.popover').tip().find ............

Answer 4

老问题，但由于我注意到没有答案提供了正确的方法，而且这是一个常见问题，我想更新它。

使用$("a#test").popover("destroy");-方法。 Fiddle here.

这将破坏旧的弹出框并让您能够以常规方式再次连接新的弹出框。

这是一个示例，您可以单击按钮在已附加弹出框的对象上设置新的弹出框。有关详细信息，请参阅小提琴。

$("button.setNewPopoverContent").on("click", function(e) {
    e.preventDefault();

    $(".popoverObject").popover("destroy").popover({
        title: "New title"
        content: "New content"
    );
});

Answer 5

这个问题已经有一年多了，但也许这对其他人有用。

如果仅在隐藏弹出框时更改内容，我发现最简单的方法是使用函数和一些 JS 代码。

具体来说，我的 HTML 如下所示：

<input id="test" data-toggle="popover"
       data-placement="bottom" data-trigger="focus" />
<div id="popover-content" style="display: none">
  <!-- Hidden div with the popover content -->
  <p>This is the popover content</p>
</div>

请注意没有指定数据内容。在 JS 中，当创建 popover 时，会使用一个函数来处理内容：

$('test').popover({
    html: true,
    content: function() { return $('#popover-content').html(); }
});

现在您可以在任何地方更改 popover-content div，并且 popover 将在下次显示时更新：

$('#popover-content').html("<p>New content</p>");

我猜这个想法也适用于使用纯文本而不是 HTML。

Answer 6

在 Boostrap 4 上只有一行：

$("#your-element").attr("data-content", "your new popover content")

Answer 7

你总是可以直接修改 DOM：

$('a#test').next(".popover").find(".popover-content").html("Content");

例如，如果您想要一个弹出框，该弹出框将从 API 加载一些数据并在悬停时将其显示在弹出框的内容中：

    $("#myPopover").popover({
        trigger: 'hover'
    }).on('shown.bs.popover', function () {
        var popover = $(this);
        var contentEl = popover.next(".popover").find(".popover-content");
        // Show spinner while waiting for data to be fetched
        contentEl.html("<i class='fa fa-spinner fa-pulse fa-2x fa-fw'></i>");

        var myParameter = popover.data('api-parameter');
        $.getJSON("http://ipinfo.io/" + myParameter)
        .done(function (data) {
          var result = '';
          if (data.org) {
            result += data.org + '<br>';
          }
          if (data.city) {
            result += data.city + ', ';
          }

          if (data.region) {
            result += data.region + ' ';
          }
          if (data.country) {
            result += data.country;
          }
          if (result == '') {
            result = "No info found.";
          }
          contentEl.html(result);
        }).fail(function (data) {
          result = "No info found.";
          contentEl.html(result);
        });
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="#" id="myPopover" data-toggle="popover" data-title="IP Details" data-api-parameter="151.101.1.69">Hover here for details on IP 151.101.1.69</a>

这假设您信任 API 提供的数据。如果没有，您将需要转义返回的数据以缓解 XSS 攻击。

Answer 8

不要从以前的答案中学习

let popOverOptions = {
    trigger: 'click',
    ...
    };

// save popOver instance
let popOver = $(`#popover-unique-id`).popover(popOverOptions);

// get its data
let popOverData = popOver.data('bs.popover');

// load data dynamically (may be with AJAX call)
$(`#popover-unique-id`).on('shown.bs.popover', () => {

    setTimeout(() => {

        // set content, title etc...
        popOverData.config.content = 'content/////////';

        // updata the popup in realtime or else this will be shown next time opens
        popOverData.setContent();

        // Can add this if necessary for position correction: 
        popOver._popper.update();

    }, 2000);

});

这样我们可以轻松更新弹出框内容。

还有另一种使用destroy 方法的方法。 http://jsfiddle.net/bj5ryvop/5/

Answer 9

我发现Bootstrap popover content cannot changed dynamically 引入了setContent 函数。因此，我的代码（希望对某人有所帮助）是：

（注意 jquery data() 并不擅长设置）

// Update basket
current = $('#basketPopover').data('content');
newbasket = current.replace(/\d+/i,parseInt(data));

$('#basketPopover').attr('data-content',newbasket);
$('#basketPopover').setContent();
$('#basketPopover').$tip.addClass(popover.options.placement);

Answer 10

如果 jQuery > 4.1 使用

$("#popoverId").popover("dispose").popover({
     title: "Your new title"
     content: "Your new content"
);

Answer 11

引导 5.0 更新

let popoverInstance = new bootstrap.Popover($('#element'));

然后：

popoverInstance._config.content = "Hello world";
popoverInstance.setContent();

（注意：它将全局更新弹出框内容，因此如果您有多个打开的弹出框，那么它们都将更新为“Hello world”）