[英]Bootstrap set popover content
I have been trying to find a way to dynamically modify the content of a bootstrap popover using Javascript, however the method i have come across so far have not worked : 我一直在尝试找到一种方法来使用Javascript动态修改bootstrap popover的内容,但是到目前为止,我遇到的方法没有用:
<!--object with the popover-->
<input id="popoverlist" type="text" name="poplist" placeholder="Enter data" data-html="true" data-content="" rel="popover" data-placement="bottom" data-original-title="pop list" >
$('#popoverlist').popover({
offset: 10,
trigger: 'manual',
animate: false,
html: true,
placement: 'left',
template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).click(function(e) {
e.preventDefault() ;
}).mouseenter(function(e) {
$(this).popover('show');
});
The methods i have been trying to use to set the html content are : 我一直试图用来设置html内容的方法是:
$('#popoverlist').data('bs.popover').html("<p>New content</p>");
//and using the inner HTML
document.getElementsByClassName("popover-content")[0].innerHTML = '<p>New content</p>';
However neither of those methods change the html data content. 但是,这些方法都不能更改html数据内容。 I would appreciate any help on this to point me in the correct direction :)
我很乐意为此提供任何帮助,以指出正确的方向:)
Your second idea works, but you need to invoke it after the popover-content has been created. 您的第二个想法可行,但是您需要在创建popover-content 之后调用它。
The popover isn't created until the first time it is shown, and is recreated after each call to show
. 弹出窗口直到第一次显示时才创建,并在每次调用
show
之后重新创建。 Thus, you need to change the content after $(this).popover('show');
因此,您需要在
$(this).popover('show');
之后更改内容$(this).popover('show');
. 。
I've included a snippet showing this in action: 我包含了一个片段,显示了实际操作:
$('#popoverlist').popover({ offset: 10, trigger: 'manual', animate: false, html: true, placement: 'bottom', template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' }).click(function(e) { e.preventDefault() ; }).mouseenter(function(e) { $(this).popover('show'); // dynamically change content after show document.getElementsByClassName("popover-content")[0].innerHTML = '<p>New content</p>'; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <input id="popoverlist" type="text" name="poplist" placeholder="Enter data" data-html="true" data-content="" rel="popover" data-placement="bottom" data-original-title="pop list" >
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.