我一直在尝试找到一种使用 Javascript 动态修改 Bootstrap 弹出窗口内容的方法,但是到目前为止我遇到的方法还没有奏效:
<!--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');
});
我一直尝试用来设置 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>';
然而,这些方法都没有改变 html 数据内容。如果能为我指明正确的方向,我将不胜感激 :)
最佳答案
您的第二个想法可行,但您需要在创建弹出内容后调用它。
弹出框在第一次显示之前不会创建,每次调用 show
后都会重新创建。因此,您需要更改 $(this).popover('show');
.
我已经包含了一个片段来展示这个 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" >
关于javascript - Bootstrap 设置弹出框内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38174655/