Как заставить Intro.js выбирать элемент, который динамически генерируется после загрузки страницы ⇐ Javascript

[Гость]

JsFiddle: JsFiddle

У меня есть всплывающее окно начальной загрузки и кнопка для вызова всплывающего окна.

Моя цель: я хочу представить функцию Intro.js:

Шаг 1: нажмите кнопку;

Шаг 2. Вот всплывающее окно.

Intro.js предоставляет возможность предварительно определить шаги программно. Итак, вот мой код интро:

var intro2 = introJs(); intro2.setOptions({ выходOnOverlayClick: правда, showBullets: ложь, //showStepNumbers: ложь, шаги: [ { элемент: document.querySelector('#saveSelection'), intro: "Нажмите эту кнопку, чтобы вызвать всплывающее окно.", позиция: «сверху» }, { элемент: document.querySelector('.popover.fade.top.in'), введение: "поповер окно", позиция: «сверху» }, ], }).setOption('doneLabel', 'Закрыть').start(); }); Но моя проблема в том, что, пока я был в макете introJs (шаг 1), он нашел кнопку, но на этот раз всплывающее окно не было вызвано. Затем я нажал кнопку, появилось всплывающее окно, затем я нажал кнопку "Далее" на Introjs, и он не смог найти мое всплывающее окно.

Причина, вероятно, в том, что introJs был инициализирован в первый раз. он уже просканировал эти элементы на шагах, которые я определил в intro2.setOptions, но поскольку всплывающее окно является динамическим элементом, introJs не смог найти всплывающее окно с именем class="popover Fade Top in " на начальном этапе.

Та же проблема возникла и с модальным загрузочным окном.

Есть какие-нибудь решения?