У меня есть несколько всплывающих окон, которые размещены в разных ячейках таблицы данных jquery.
//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>
Инициализация всплывающего окна:
$('#MyDataTable').on('mouseenter', '.popoverIcon', function (event) {
$(this).popover({
html: true,
content: function () {
return $(this).next().html();
},
title: "Comment",
trigger: "manual"
});
});
Я хочу, чтобы всплывающее окно имело все функции trigger: "click", но его можно было закрыть, щелкнув СНАРУЖИ области элемента всплывающего окна (область всплывающего окна = само окно всплывающего окна или упомянутый элемент i). Я применил решение, которое нашел здесь Как закрыть всплывающее окно Twitter Bootstrap, щелкнув снаружи?
Похоже на то. Функция SHOW popover:
$('#MyDataTable').on('click', '.popoverIcon', function (event) {
//if popover closed - open it
if (!popoverOpen) {
$(this).popover('toggle');
popoverOpen = true;
}
});
Функция для СКРЫТИЯ всплывающего окна:
$(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;
}
});
Странно то, что он работает отлично, но ТОЛЬКО с самого первого поповера, который я открываю. Когда я пытаюсь открыть вторую, третью, четвертую (...), ничего не происходит. Когда я возвращаюсь к первому, который я щелкнул, он снова работает. В чем может быть дело?
