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>, это сработает. Но я хочу добавить его динамически, чтобы назначить идентификатор каждой ссылке (кнопке).

Кто-нибудь? Почему в этом случае append не работает?

EDIT

@ Арекс отметил, что состояние 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(), и это работает .. Но когда я открываю и закрываю popover 2-3 раза, он становится пустым. Это начинает раздражать -.-

Answer 1

Я создал эту скрипку для вас. Это должно помочь вам.

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 (Делайте это за пределами функции, запускаемой по нажатию кнопки, или она продолжит повторную инициализацию до 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;   
        }
    });}
        }