javascript-如何更新引导程序弹出文本?

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

如果我想在第一次之后在弹出窗口中显示其他文本,则文本不会更改。 用新文本重新实例化弹出框不会覆盖。

请参阅此js小提琴以获取实时示例:

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

(第一次单击后,警报中的消息和dom中的消息不一致)该文档对如何解除绑定有一些帮助:[http://twitter.github.com/bootstrap/javascript.html#popovers]

我使用这个错误吗? 关于如何解决的任何建议?

谢谢

Chris asked 2019-11-15T13:05:23Z
7个解决方案
77 votes

您可以使用jquery数据闭包字典直接访问选项,如下所示:

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

即使首先初始化弹出窗口,此代码也应该可以正常工作。

Rabih Kodeih answered 2019-11-15T13:07:03Z
54 votes

Hiya请在此处查看工作演示:[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>
​
Tats_innit answered 2019-11-15T13:06:29Z
23 votes

万一有人在寻找不涉及重新实例化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 ............
Codefendant answered 2019-11-15T13:07:47Z
15 votes

这是一个老问题,但是由于我注意到没有答案提供了正确的方法,并且这是一个常见问题,因此我想对其进行更新。

使用$("a#test").popover("destroy");方法。 在这里摆弄。

这将破坏旧的弹出窗口,并使您能够以常规方式再次连接新的弹出窗口。

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

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

    $(".popoverObject").popover("destroy").popover({
        title: "New title"
        content: "New content"
    );
});
Helge Talvik Söderström answered 2019-11-15T13:08:45Z
8 votes

这个问题已有一年多的历史了,但这也许对其他人有用。

如果仅在隐藏弹出窗口时更改内容,那么我发现的最简单方法是使用一个函数和一些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中,当创建弹出窗口时,将对内容使用一个函数:

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

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

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

我想这个想法也可以使用纯文本而不是HTML。

Googol answered 2019-11-15T13:09:48Z
3 votes

您始终可以直接修改DOM:

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

例如,如果您想要一个弹出窗口,它将从API加载一些数据并在悬停时显示在弹出窗口的内容中:

<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>
<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攻击。

alexw answered 2019-11-15T13:10:44Z
0 votes

我发现Bootstrap弹出内容无法动态更改,从而引入了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);
Antony answered 2019-11-15T13:11:17Z
translate from https://stackoverflow.com:/questions/10226851/how-to-update-bootstrap-popover-text