Bootstrap 4 устанавливает содержимое popover для содержимого div - PullRequest
Новая
       12

Bootstrap 4 устанавливает содержимое popover для содержимого div

0 голосов
/ 08 сентября 2018

У меня проблемы с всплывающими окнами Bootstrap 4.

Моя страница содержит несколько элементов div, каждый из которых содержит содержимое всплывающего окна, например, 

<div class="d-none" id="popover-content-cld">
<p>An infant is considered to have Chronic Lung Disease (CLD): [...]</p>
</div>

Это всплывающее окно следует использовать, когда пользователь нажимает, например, на эту ссылку: 

<a tabindex="0" role="button" href="#" id="cld.210" 
 data-toggle="popover" data-trigger="focus" 
 title="Chronic Lung Disease (CLD)" 
 data-content="No additional information found, please contact support."> 
 <i class="fa fa-info-circle text-black-50" aria-hidden="true"></i></a>

У меня есть несколько экземпляров на странице, которые должны использовать этот же поповер. Все они начинаются с одного и того же префикса, за которым следует точка, за которой следует уникальный номер, что делает идентификатор каждого тега уникальным. У меня есть стандартное сообщение с данными, которое используется для тега, которое должно быть заменено более информативным, если оно доступно.

Для обновления содержимого всплывающего окна я использую следующую функцию, которая вызывается при загрузке страницы: 

$("[data-toggle=popover]").each(function(i, obj) {
  $(this).popover({
    html: true,
    content: function() {
      var id = $(this).attr('id').split(".");
      return $('#popover-content-' + id[0]).html();
    }
  });
});

Отладчик четко выполняет функцию для каждого элемента, который должен иметь всплывающее окно на странице. Поповерный контент также правильно подобран. Тем не менее, содержимое моего popover никогда не меняется по умолчанию.

Чего мне не хватает?

1 Ответ

0 голосов
/ 09 сентября 2018

Я смог получить то, что мне нужно для работы, вместо этого вызвав функцию, которая запускается непосредственно перед отображением содержимого всплывающего окна: 

$('a[data-toggle="popover"]').on('show.bs.popover', function () {
  var id = $(this).attr('id').split(".");
  $(this).attr('data-content', $('#popover-content-' + id[0]).html());
});
...