CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3popover
JerryBox
JerryBox

Reputation: 131

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

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?

Upvotes: 2

Views: 2023

Answers (2)

moin
moin

Reputation: 89

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()

Upvotes: 0

cyrus
cyrus

Reputation: 134

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

Upvotes: 3

Related Questions