Question

我需要经常更改bootstrap popover中的popover内容。为了使我用内容创建popover，下次我销毁了popover并再次创建。但它没有按预期工作。问题是它只在偶数时间工作，即。它第一次工作第二次不工作第三次工作等等。

我已将我的方案创建为

HTML

<div id="today_not_to_doctr">
  note
</div>
<button id="test">
  haii
</button>

Javascript

var i = 0;
var content = "<div>haiii</div>" + i;

$('#today_not_to_doctr').popover({
  title: "<h5>Note to Doctor</h5>",
  content: content,
  html: true,
  placement: "bottom",
  viewport: {
    selector: 'body',
    padding: 20
  }
});

$('#test').on('click', function() {
  i++;
  content = "<div>haiii</div>" + i;
  $('#today_not_to_doctr').popover('destroy');
  $('#today_not_to_doctr').popover({
    title: "<h5>Note to Doctor</h5>",
    content: content,
    html: true,
    placement: "bottom",
    viewport: {
      selector: 'body',
      padding: 20
    }
  });
});

我在小提琴中复制了这个问题 https://jsfiddle.net/sulusfiddle/b8omeph2/

Answer 1

试试这个：

var i = 0;

var popover = $('#today_not_to_doctr').popover({
  title: "<h5>Note to Doctor</h5>",
  trigger: 'manual',
  template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
  content: function() {
    return "<div>haiii</div>" + i;
  },
  html: true,
  placement: "bottom",
  viewport: {
    selector: 'body',
    padding: 20
  }
});

$('#test').on('click', function() {
  i++;
  popover.popover("show");
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div id="today_not_to_doctr">
  note
</div>
<button id="test">
  haii
</button>

Bootstrap popover更改html内容

1 个答案: