跳房子游览步骤动态生成的内容

我正在我的应用程序中实现几个Hopscotch(https://github.com/linkedin/hopscotch/)之旅.到目前为止,我已经设法做了很多旅行没有任何问题.但是今天我面临着迄今为止无法克服的挑战.如何获得一个游览步骤目标来处理动态生成的内容？我会解释.

这是HTML:

    

        
Todos os Destinos
        

            
                
                    
                
            
        
    

每当我点击链接时,它会动态创建一个包含许多元素的div.其中一个是带有一个名为.quarto-config-wrapper的类的div.

如果我试图让我的Hopscotch巡演转到这个元素,它就不起作用了.我的猜测是因为动态创建的元素不在DOM中.

这是我的跳房子步骤代码:

{
    title: "Adicionar um novo quarto",
    content: "content here",
    target: $('.add-child-link-wrapper')[0],
    placement: "left",
    width: 500,
    yOffset: -15,
    nextOnTargetClick: true,
    showNextButton: false
},
{
    title: "Menu de configuração do quarto",
    content: "content here",
    target: $('.quarto-config-wrapper')[0],
    placement: "left",
    width: 700,
    yOffset: -15,
    nextOnTargetClick: true,
    showNextButton: false,
    delay: 1200
}

第一步有效,而不是第二步.有帮助吗？

我搜遍了整个地方寻找这个问题的解决方案,这篇文章是最接近但不太确定的解决方案,所以在这里:

{ // This is the previous step
    element: "#idElement",
    title: "The Title",
    content: "The Content",
    onNext: function(tour) {
            tour.end();
            var checkExist = setInterval(function() {
                // This is the element from the next step. 
                $element = $('#idElementFromNextStep'); 

                if ($element.is(':visible')) {
                    clearInterval(checkExist);
                    tour.start(true); // True is to force the tour to start
                    tour.goTo(1); // The number is your next index (remember its base 0)
                }
            }, 100);
    },
    multipage: true, // Required
    orphan: true // Recommended
},{ // This is the step that was not working
    element: "#idElementFromNextStep",
    title: "Title of the step",
    content: "Details of the step",
    orphan: true,
}

所以这样做基本上是在下一个被触发时停止巡视,等待元素被添加到DOM然后通过其索引从正确的步骤重新开始巡回.

我从@Luksurious那里借了一些代码.他的解决方案有点工作(虽然不适用于Bootstrap Tour),但无论如何,当它加载下一步并返回正确的时,它会产生一个轻弹.

我强烈建议不要使用延迟,它可能似乎适用于您的本地环境,但推测客户端加载需要多长时间极其危险.

希望它可以帮助别人!