javascript - Bootstrap Popover 内容不起作用

Question

我有一个触发弹出窗口的按钮。它是由另一个脚本生成的。

$('#appendTarget').append('<div class="col-md-3" style="border: 2px solid grey; border-radius: 12px; padding: 5px; margin-bottom: 10px;">' + item.name +
    '</div>' +
    '<div class="col-md-3"><button class="btn" style="margin-bottom: 10px" onclick="showPopover(this)"><b style="color: red"><img src="Img/gear.png" style="width: 20px; height: 20px"></b></button>');

这是我的触发函数:

function showPopover(element) {
    $(element).popover({
        html: true,
        content: function() {
            $('#popover-content').append('<a href="#" class="btn btn-secondary">Edit</a>'
                                        +'<a href="#" class="btn btn-info">Activate</a>'
                                        +'<a href="#" class="btn btn-danger">Delete</a>');
        }
    });
}

还有popover-content是这样的:

<ul id="popover-content" class="list-group" style="display: none">
</ul>

但是它不起作用。但是，如果我将此链接直接添加到 <ul> 中有用。但我想动态添加它，这样我就可以将 id 分配给每个链接(按钮)。

有人吗？为什么追加在这种情况下不起作用？

编辑

@Arex 有一个很好的观点:display:none状态没有改变。我改变了我的功能，它看起来像这样:

function showPopover(element) {
    $(element).popover({
        html: true,
        content: function() {

            var popover =  $('#popover-content');

            popover.show();

            popover = popover.append('<a href="#" class="btn btn-secondary">Edit</a>'
                                        +'<a href="#" class="btn btn-info">Activate</a>'
                                        +'<a href="#" class="btn btn-danger">Delete</a>');
            return popover;   
        }
    });
}

它确实有效，但很奇怪......

当我第一次点击时，看起来一切都很好:

之后，当我尝试关闭该弹出窗口时，它会扩展(加倍)内容:

最后，当我尝试再次打开它时，它显示空的弹出窗口:/

编辑2

我添加了popover.empty()它有效..但是当我打开和关闭弹出窗口 2-3 次时，它就变成空的。这开始很烦人 -.-

Answer 1

我创建了this为你拨弄。这应该对你有帮助。

HTML:

<div id="appendTarget"></div>

<ul id="popover-content" class="list-group" style="display: none">
</ul>

jQuery:

var isMyPopoverShown = false;

function myPop(element) {
  if(isMyPopoverShown === false) {
    $(element).popover({
        html: true,
        content: function() {
            $('#popover-content').html('<li><a href="#" class="btn btn-secondary">Edit</a></li>'
            +'<li><a href="#" class="btn btn-info">Activate</a></li>'
            +'<li><a href="#" class="btn btn-danger">Delete</a></li>');
            return $('#popover-content').html();
        }
    });
  }  
  $(element).popover('toggle');
}

jQuery(document).ready(function() {
   $('#appendTarget').append('<div class="col-md-3" style="border: 2px solid grey; border-radius: 12px; padding: 5px; margin-bottom: 10px;">Item' + 
    '</div>' +
    '<div class="col-md-3"><button class="btn" style="margin-bottom: 10px" onclick="myPop(this);" data-trigger="manual"><b style="color: red">Button</b></button></div>');

  $(".btn").on('shown.bs.popover',function(){
    isMyPopoverShown = true;
  });

});