javascript - Bootstrap Popover 内容不起作用

问题描述

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

$('#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 分配给每个链接（按钮）。

任何人？为什么 append 在这种情况下不起作用？

编辑

@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 次时，它变成了空的。这开始很烦人-.-

标签： javascriptjqueryhtmltwitter-bootstrap

我为你创造了这个小提琴。这应该可以帮助你。

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;
  });

});

javascript - Bootstrap Popover 内容不起作用

问题描述

解决方案

推荐阅读