Bootstrap Popover content not working

Question

I have a button which triggers a popover. It is generated by another script.

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

This is my function for triggering:

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

And the popover-content is this:

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

But it is not working. However if I add this links directly into <ul> it works. But I want to add it dynamically so I can assign the id to each link (button).

Anyone? Why append is not working in this case?

EDIT

@Arex had a good point that display:none state was not changing. I changed my function and it looks like this:

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

And it works but very strange...

When I click first time it looks like everything is fine:

After that when I try to close that popover, it extends (doubles) the content:

And finally when I try to open it again, it shows empty popover :/

EDIT 2

I added popover.empty() and it works.. But when I open and close popover 2-3 times, it becomes empty. This starts to be annoying -.-

Answer 1

Basically you are keeping on appending more and more <a> to the popover on every click. Do this instead: Create a variable i and initialise it as i=1(Do this outside the onclick triggered function or it will keep on re-initialising to 1 ). Inside your function check if i==1 if it is true use your current code and increment it by 1. else if check i is divisible by 2 -> if it is true hide it, else -> show it.

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

Answer 2

I have created this fiddle for you. This should help you.

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

});