Bootstrap Popover更改HTML内容 [英] Bootstrap popover change html content

问题描述

我需要经常更改引导程序弹出窗口内的弹出窗口内容.为此，我使用内容创建了弹出窗口，下一次我销毁了该弹出窗口并再次创建了该弹出窗口.但是它没有按预期工作.问题是它仅在偶数时间起作用，即.它第一次工作是第二次，而工作不到三分之一，以此类推.

I need to change the popover content inside the bootstrap popover frequently. To make that i created the popover with the content, for the next time i destroyed the popover and created again. But its not working as expected. The issue is its only working on even times, ie. for the 1st time it works for second its not working for third its working and so on.

我的场景创建为

HTML

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

JavaScript

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/

I have replicated the issue in the fiddle https://jsfiddle.net/sulusfiddle/b8omeph2/

推荐答案

尝试一下:

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内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！