javascript - Bootstrap 设置弹出框内容

Question

我一直在尝试找到一种使用 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 数据内容。如果能为我指明正确的方向，我将不胜感激 :)

Answer 1

您的第二个想法可行，但您需要在创建弹出内容后调用它。

弹出框在第一次显示之前不会创建，每次调用 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" >