如何更新引导popup文本?

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

如果我想在第一次popup后显示不同的文本,文本不会改变。 重新实例化新文本的popup窗口不会被覆盖。

看到这个js小提琴现场的例子:

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

(第一次点击后,警报中的消息和dom中的消息是不一致的)有关如何解除绑定的文档有点轻松: http : //twitter.github.com/bootstrap/javascript.html#popovers

我使用这个错误? 任何build议如何解决?

谢谢

嗨请参阅工作演示在这里: http : //jsfiddle.net/4g3Py/1/

我已经做出了改变,以获得您想要的结果。 🙂

我想你已经知道你在做什么,但从我的一些示例build议如下样本: http : //dl.dropbox.com/u/74874/test_scripts/popover/index.html# – 共享此链接给你想法不同的链接与不同的popup式窗口,如果你会看到源通知属性data-content但你想要的是通过以下的变化工作。

有一个很好的,希望这可以帮助。 呃不要忘了投票并接受答案:)

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>​ 

您可以直接使用jQuery数据closures字典来访问这些选项,如下所示:

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

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

只是在任何人正在寻找一个解决scheme,不涉及重新实例化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 ............ 

老问题,但因为我注意到没有答案提供了正确的方式,这是一个常见的问题,我想更新它。

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

这将摧毁旧的popover并使您能够以常规方式再次连接新的popover。

下面是一个例子,您可以点击一个button,在已经有popup窗口的对象上设置新的popup窗口。 看到小提琴的更多细节。

 $("button.setNewPopoverContent").on("click", function(e) { e.preventDefault(); $(".popoverObject").popover("destroy").popover({ title: "New title" content: "New content" ); }); 

这个问题已经一年多了,但也许这对其他人来说是有用的。

如果内容只是在popup窗口被隐藏的时候才改变的话,我发现的最简单的方法是使用一个函数和一些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中,创buildpopup窗口时,会为内容使用一个函数:

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

现在你可以在下一次显示popover-content div和popover的地方更改:

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

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

你可以随时直接修改DOM:

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

例如,如果您想要一个popup窗口来从API加载一些数据,并将其显示在hover的popup窗口的内容上:

  $("#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> 

我发现Bootstrappopup窗口的内容不能dynamic改变 ,这引入了setContent函数。 我的代码(希望对某人有帮助)是:

(注意,jQuery数据()不是很好的设置,因为它越来越)

 // 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);