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

d6kp6zgx 于 2023-10-17 发布在 jQuery

关注(0)|答案(3)|浏览(173)

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中定义的步骤中扫描了这些元素，但是由于弹出框是一个动态元素，所以introJs在初始阶段无法找到名为class="popover fade top in"的弹出框。
Bootstrap Modal也出现了同样的问题。
有什么办法吗？

jquery

来源：https://stackoverflow.com/questions/36650854/how-to-make-intro-js-select-the-element-that-dynamically-generated-after-page-lo

3条答案

按热度按时间

vq8itlhq1#

如果有人还在google上寻找解决方案的话，我已经找到了一个可行的解决方案，可以应用于将一个步骤的元素附加到动态对象的其他情况。
在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

赞(0）回复(0）举报 2023-10-17

cgyqldqp2#

我也有同样的问题。我无法访问intro2的私有属性 _introItems 来更改数组。
所以我就这样做了，而且很有效。

intro2.onafterchange((el) => {
    if (intro2.currentStep() === theStepYouWantToChange) {
        const targetElement: HTMLElement = document.querySelector('.popover.fade.top.in');
        
        if (targetElement) {
            targetElement.classList.add('introjs-showElement')
        }
    }
});

希望这对你有帮助。

赞(0）回复(0）举报 2023-10-17

6l7fqoea3#

如果我没记错的话，你有同样的问题，问Event binding on dynamically created elements?
在这种情况下，你必须将一个函数绑定到动态创建的元素。

赞(0）回复(0）举报 2023-10-17