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

【问题标题】：How to make Intro.js select the element that dynamically generated after page load如何让 Intro.js 选择页面加载后动态生成的元素
【发布时间】：2016-08-07 15:29:23
【问题描述】：

JsFiddle：JsFiddle

我有一个引导弹出窗口和一个用于调用弹出窗口的按钮。

我的目标是：我想引入 Intro.js 功能：

第一步：点击按钮；

第 2 步：这是弹出窗口。

Intro.js 提供了一个可以以编程方式预先定义步骤的选项。所以这是我的 introjs 代码：

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。

bootstrap Modal 也出现了同样的问题。

有什么解决办法吗？

【问题讨论】：

你找到解决这个问题的方法了吗？我还想动态加载 intro.js 中的步骤
@Brandon Roberts 我使用了替代解决方案并修复了它。弹出窗口不会在document.ready() 状态下生成到 DOM 中。所以我在弹出窗口中放了一个按钮。所以每次显示在页面上的时候，我点击那个按钮调用intro.js，然后introjs就会找到弹出窗口的位置并正确显示。

标签： javascript jquery

【解决方案1】：

如果我没记错的话，你和Event binding on dynamically created elements?问的问题一样

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

【讨论】：

好的，如果这是理想地解决这个问题的唯一方法，这是我最不希望的......

【解决方案2】：

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

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

intro2.onbeforechange(function(){
  if (this._introItems[this._currentStep].preChange) {
    this._introItems[this._currentStep].preChange();
  }
});

在popover步骤中，使用preChange属性调用函数并动态设置该步骤的元素和位置。

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

请注意，如果在移动到弹出框步骤时弹出框未激活，则代码通常会中断，因此您需要在移动到该步骤之前强制/检查弹出框是否打开。否则，假设弹出框在此示例中可见，它按预期运行

JSFiddle

【讨论】：