Boostrap - Popover only being fired after second click

Question

I addClass/removeClass a CSS class called SiteClass dynamically (see this question for background). I bind a bootstrap popover to these like so:

$(document).ready(function(){

  $("#SiteList").on('click','a.SiteClass', function(e){
    alert('clicked');
    e.preventDefault();
    e.stopPropagation();
    var strcontent = $(this).html();
    var strTitle = 'Title for ' + strcontent;
    var strMessage = 'Foo <b>Bar</b> Baz';

    $(this).popover({
       html: true,
       title: strTitle,
       content: strMessage 
    });
  });

});

The first time I click I get the alert box 'clicked', but no popover. Subsequent clicks and the popover works.

Any clue as to why this is happening and to get the popover to fire from click 1?

Try adding `$(this).popover("show");` to the end of your onclick function. — elethan, Dec 16 '16 at 15:25
@elethan when I add that line it launches first time but I can't ever close the popover by clicking the link again. — Dr.Avalanche, Dec 16 '16 at 15:29
@elethan with this as the last line before closing the .on I get the same problem as the comment above. — Dr.Avalanche, Dec 16 '16 at 15:32

elethan · Accepted Answer · 2016-12-16T15:48:52.070

2

$().popover(options) simply initializes your popover. You can trigger the display of the popover with:

$(this).popover('show');

If you would like to toggle the popover on click instead, try:

$(this).popover('toggle');

I think the reason it works only after the first click in your case is that with the first click the popover is initialized with the default trigger 'click', so that subsequent clicks (but not the first click) will trigger it.

edited Dec 16 '16 at 15:48

answered Dec 16 '16 at 15:32

elethan

16,408
8
64
87

1

I had to add `trigger: manual,` to my popover options, which works like a charm with your toggle suggestion. thanks. – Dr.Avalanche Dec 16 '16 at 15:42

score 0 · Answer 2 · answered Nov 16 '20 at 07:03

after a lot of tries finally I have found out this solution and working fine:

<script>
    $(document).ready(function () {
        $(document).on("click", '#add-new', function (e) {
            e.preventDefault();
    
            $('#add-new').popover({
                placement: 'right',
                html: true,
                container: 'body',
                trigger: 'manual',
                content: function () {
                    return $('#popover_content_wrapper').html();
                },
            });
            $(this).popover('toggle');
        });
    });
</script>

Boostrap - Popover only being fired after second click

2 Answers2