Multiple bootstrap popovers on page but only the first one that's clicked works as desired

Question

I have multiple popovers which are placed in different cells of a jquery datatable.

//popover needs to be triggered onclick on this i element
<i tabIndex ="0" class="fa fa-info-circle popoverIcon" aria-hidden="true" data-placement="bottom" data-toggle="popover" ></i>
//this is hidden by css
<div class="popover-content hidden"><div>Popover text</div></div>

Popover initialization:

$('#MyDataTable').on('mouseenter', '.popoverIcon', function (event) {
  $(this).popover({
    html: true,
    content: function () {
            return $(this).next().html();
        },
    title: "Comment",
    trigger: "manual"
    });
});

I want the popover to have all trigger: "click" functionality, but be dismissable by clicking OUTSIDE the popover element area (popover area = the popover box itself or the mentioned i element). I have applied a solution I found here How to dismiss a Twitter Bootstrap popover by clicking outside?

It looks like that. The function to SHOW popover:

$('#MyDataTable').on('click', '.popoverIcon', function (event) {
    //if popover closed - open it
    if (!popoverOpen) {
        $(this).popover('toggle');
        popoverOpen = true;
    }
});

The function to HIDE popover:

 $(document).on('click', function (e) {
  if (popoverOpen && !mouseOnPopoverArea) {
        $('[data-toggle="popover"]').each(function () {
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                $(this).popover('hide');
            }
        });
        popoverOpen = false;
    }
});

The strange thing is, it works perfectly, but ONLY with the very first popover I open. When I try to open the second, third, fourth (...) one, nothing is happenning. When I go back to the first one I clicked, it works again. What could be the matter?

score 3 · Answer 1 · answered Jan 10 '18 at 14:13

3

$('#MyDataTable').on('click', '.popoverIcon', function (event) {
    //if popover closed - open it
    if (!popoverOpen) {
        $(this).popover('toggle');
        popoverOpen = true;
    }
});

in this you are calling on click event on only one id so try to assign different ids and on click events on them accordingly

answered Jan 10 '18 at 14:13

cyrus

134
1
12

It's not an id, it's a class. All icons get it. The icon elements get generated dynamically in an .ashx file, together with the whole datatable and its data. For this reason I can't manually assign an id to each and single icon. – JerryBox Jan 10 '18 at 14:23
than if a class is unique i.e not targeting anything else than popover than use that instead of id – cyrus Jan 10 '18 at 17:22
I got the same symptoms - Only the first one working perfectly. I thought I could just dynamically wire everything up. Had to write on.click() events for each id and toggle them on and off. – Stefan Sep 09 '19 at 12:34

score 0 · Answer 2 · answered Jan 10 '18 at 15:24

0

Try to access the pop over by first targeting it's parent element using parent() through $this and then finding the pop over element in it using find()

answered Jan 10 '18 at 15:24

moin

89
3
11

Multiple bootstrap popovers on page but only the first one that's clicked works as desired

2 Answers2