Question

我一直在尝试使用Javascript找到一种动态修改bootstrap popover内容的方法，但到目前为止我遇到的方法都没有用：

<!--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

您的第二个想法有效，但您需要在创建popover内容后调用它。

弹出窗口直到第一次显示时才会创建，并在每次调用show后重新创建。因此，您需要在$(this).popover('show');之后更改内容。

我已经添加了一个代码段，显示了这一点：

$('#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" >

Bootstrap设置popover内容

1 个答案: