Почему мой Popover работает, когда элементы создаются через HTML, а не динамически через JavaScript? - PullRequest
Новая
       14

Почему мой Popover работает, когда элементы создаются через HTML, а не динамически через JavaScript?

2 голосов
/ 30 апреля 2019

Я создаю метод для добавления нескольких всплывающих окон, которые выглядят так:

Мой первый JsFiddle, рабочий вывод (нажмите, чтобы посмотреть скриншот)

ВышеЭто было то, что мне удалось создать, используя следующий код в моем первом JsFiddle:

Пример 1 - Работает! (теперь ссылка на битый код)

Iя создал точно такие же элементы DOM во втором JsFiddle (с теми же ссылками на bootstrap, popper, material-icons, jquery и т. д. и с теми же функциями и настройками css и .popover()), но по какой-то причине мой второй пример не работает,У меня действительно есть рабочий поповер, созданный с использованием элементов document.createElement() на моем главном сайте, поэтому я не знаю, почему этот не работает .. Я также проверил это вне JsFiddle, но это тоже не очень хорошо.ПОЖАЛУЙСТА, ПОМОГИТЕ!

Ссылка на мой второй JsFiddle: Пример 2 - К сожалению, не работает!Но почему ?? (теперь неработающая ссылка на код)

РЕДАКТИРОВАТЬ: Этот прекрасный человек просто исправил мой код менее чем за полчаса с момента публикации сообщения!Очень доволен @MichaelWhinfrey и Stack Overflow для этого!Вот ответ, который я сейчас приму:

похоже, что функцию popover нужно запускать после создания элементов, инициализируя их в $ (document) .ready () может бытьРешение, которое вы ищете.Я обновил вашу скрипку, добавив в нее пример jsfiddle.net / 0cwe1v9y - Майкл Уинфри 25 минут назад (2019-04-30 11: 33: 17Z)

1 Ответ

1 голос
/ 30 апреля 2019

Повторное применение всплывающего окна после загрузки всего с помощью селектора .popover-icon, кажется, решает проблему. 

$(document).ready(function (){
  $(".popover-icon").popover({
        html: true,
        animation: true,
        placement: "right",
        trigger: 'focus',
        content: function() {
            var content = $(this).attr("data-popover-content");
            return $(content).children(".popover-body").html();
        }
    });
});
...