添加介绍到动态添加的元素

Question

我的第一步指向一个必须由用户单击的按钮，然后在单击该按钮后会弹出一个对话框，用户可以在其中填写一些详细信息。

发生的事情是我只是得到背景，而介绍并不指向对话框，因为当对话框尚未出现在页面上时，它在页面加载时开始...

有没有办法做到这一点？ （主干和 introjs）

我正在使用主干在单击按钮时呈现对话框

Answer 1

我从来没有使用过intro.js，但是查看他们的文档，看起来他们有在您的介绍中添加步骤的方法，而不是pageload。在将 html 添加到页面后，您应该在主干视图的渲染方法中添加涉及对话框的步骤。 （或者如果你愿意，你可以在那里处理你所有的 intro.js 代码）。

因此，如果您的视图执行以下操作来渲染：

var myHtml = '<div class="dialog">Here is the dialog!</div>';
this.$el.html(myHtml)

那么您应该遵循以下内容：

introjs().addStep({
    element: this.el,
    intro: 'Here is the starting dialog'
}).start();

如果您在代码的其他区域定义其他 introjs 步骤，您可能需要进行一些试验才能使您的步骤按正确的顺序排列，但这应该可以帮助您开始。