Bootstrap 弹出框更改 html 内容

Posted 2023-05-08

【中文标题】Bootstrap 弹出框更改 html 内容

【英文标题】：Bootstrap popover change html content

【发布时间】：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/

【参考方案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>