Popover не отображается при добавлении контента html через innerHTML - PullRequest
Новая
       22

Popover не отображается при добавлении контента html через innerHTML

1 голос
/ 06 января 2020

Это то, что меня очень беспокоило и было бы благодарно, если бы кто-нибудь мог мне помочь.

Я хочу взять внутренний HTML из уже существующего поповера и поместить его в другой div. Когда я это делаю, поповер внутри другого div не работает.

Это моя голова: 

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
  crossorigin="anonymous"
/>

<script
  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
  crossorigin="anonymous"
></script>

<script
  src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
  integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
  crossorigin="anonymous"
></script>

<script
  src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
  integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
  crossorigin="anonymous"
></script>

Тело:

image

Скрипт: 

$(function() {
  $('[data-toggle="popover"]').popover();
});

function myFunction() {
  document.getElementById('demo').innerHTML = document.getElementById(
    'myPopover'
  ).innerHTML;
}

Когда я нажимаю кнопку, div с идентификатором "demo" должен получить внутренний HTML из div с идентификатором "myPopover". Кажется, это работает, когда я открываю инспектор в firefox, проблема в том, что всплывающее окно не отображается.

1 Ответ

1 голос
/ 06 января 2020

Вам нужно будет добавить эту строку в myFunction()

$('[data-toggle="popover"]').popover();

Поскольку вы добавляете внутренний html из myPopover div в DOM, вам нужно будет инициализировать всплывающее окно на недавно созданный элемент. В противном случае Popover не узнает об этом.

...