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。

有人吗？为什么在这种情况下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;   
        }
    });
}

它可以工作，但是很奇怪...

当我第一次单击时，一切似乎都很好：

之后，当我尝试关闭该弹出框时，它会扩展（加倍）内容：

最后，当我尝试再次打开它时，它显示出空的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;
  });

});

Answer 2

基本上，您每次点击都会不断将越来越多的<a>附加到弹出窗口。改为这样做：创建一个变量i并将其初始化为i=1（在onclick触发函数外部执行此操作，否则它将继续重新初始化为1）。在函数内部检查i==1是否正确，使用当前代码并将其递增1。否则，如果检查i被2整除->如果是，将其隐藏，其他->显示它。

        function showPopover(element) {
            if(i==1){
            $(element).popover({
                html: true,
                content: function() {

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

                    popover.show();i=i+1;

                    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;   
                }
            });
          }
        else if(i%2==0)
    {
       $(element).popover({
            html: true,
            content: function() {

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

                popover.hide();i=i+1;


                return popover;   
            }
        });
    }
   else{
        $(element).popover({
        html: true,
        content: function() {

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

            popover.show();i=i+1;


            return popover;   
        }
    });}
        }

Bootstrap Popover内容无法正常工作

2 个答案: