Bootstrap 弹出框更改 html 内容答案

【问题标题】：Bootstrap popover change html contentBootstrap 弹出框更改 html 内容
【发布时间】：2017-09-05 13:01:52
【问题描述】：

我需要经常更改引导弹出框内的弹出框内容。为了做到这一点，我用内容创建了弹出框，下一次我销毁了弹出框并再次创建。但它没有按预期工作。问题是它只在偶数时间起作用，即。第一次它工作第二次它不工作第三次它的工作等等。

我已经创建了我的场景

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/

【问题讨论】：

标签： jquery twitter-bootstrap popover

【解决方案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>

【讨论】：