Javascript 如何让Intro.js选择页面加载后动态生成的元素

JsFiddle：

我有一个引导弹出窗口和一个按钮来调用弹出窗口

我的目标是：我想用Intro.js特性来介绍：

第一步：点击按钮

第二步：这是弹出窗口

js提供了一个选项，可以通过编程预先定义步骤。下面是我的简介代码：

var intro2 = introJs();
  intro2.setOptions({
      exitOnOverlayClick: true,
      showBullets: false,
      //showStepNumbers: false,
      steps: [
      {
        element: document.querySelector('#saveSelection'),
        intro: "Click this button to call popover window.",
        position: 'top'
      },
      {
        element: document.querySelector('.popover.fade.top.in'),
        intro: "popover windown",
        position: 'top'
      }, 
      ],
  }).setOption('doneLabel', 'Close').start();
  });

但我的问题是，当我在introJs布局（步骤1）中时，它找到了按钮，但这次弹出窗口没有被调用。然后我继续点击按钮，弹出窗口，然后我点击Introjs上的下一步，它找不到我的弹出窗口

原因可能是当introJs第一次被初始化时。它已经在我在

intro2.setOptions

中定义的步骤中扫描了这些元素，但是由于popover是一个动态元素，因此introJs在初始阶段找不到名为

class=“popover fade top in”

的popover

同样的问题也发生在引导模式上

---

有什么解决办法吗？

如果我没弄错的话，你的问题和我问的一样

---

在这种情况下，您必须将一个函数绑定到dinamic创建的元素。

如果有人还在google上寻找解决方案，我找到了一个可行的解决方案，可以应用于将步骤的元素附加到动态对象的其他情况

在intro对象init上，添加以下内容以在加载步骤之前启用特定于步骤的函数调用。（）

在popover步骤中，使用

preChange

属性调用函数并动态设置该步骤的元素和位置

  {
    intro: "popover windown",
    preChange: function(){
      this.element = document.querySelector('.popover.fade.top.in');
      this.position = "top";
    }
  },

请注意，如果移动到popover步骤时popover未处于活动状态，则代码通常会中断，因此在移动到该步骤之前，您需要强制/检查popover是否打开。否则，假设在本例中popover是可见的，它将按预期工作

---

好的，如果这是理想解决这个问题的唯一方法，这是我最不希望看到的……你找到这个问题的解决方案了吗？我还想动态加载介绍中的步骤。js@Brandon罗伯茨：我用了另一种解决方案，并修复了它。Popover窗口在

document.ready（）状态下不生成DOM。所以我把一个按钮放在弹出窗口里面。因此，每当它显示在页面上时，我单击该按钮调用intro.js，introjs就会找到弹出窗口的位置并正确显示。
  {
    intro: "popover windown",
    preChange: function(){
      this.element = document.querySelector('.popover.fade.top.in');
      this.position = "top";
    }
  },