jquery - 动态生成内容上的跳房子之旅

Question

我正在实现几个 Hopscotch在我的应用程序中游览。

到目前为止，我已经成功地完成了许多巡回演出，但今天，我面临着一个我无法解决的挑战。

我的问题是:如何获得一个游览步骤目标来处理动态生成的内容？

这是 HTML:

<div class="pacote-destino-quartos-wrapper">
    <div class="pacote-destino-quartos-internal-wrapper">
        <h4>Todos os Destinos</h4>
        <div class="dynamic_nested_form_wrapper quartos_external_wrapper" data-destino="todos">
            <span class="add-child-link-wrapper">
                <a href="javascript:void(0)" class="add_child btn btn-info" data-association="quartos">
                    <i class="icon-plus icon-white"></i>
                </a>
            </span>
        </div>
    </div>
</div>

每当我单击链接时，它都会动态创建一个包含许多元素的 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
}

第一步有效，但第二步无效。

我做错了什么，我该如何解决？

Answer 1

我到处搜索这个问题的解决方案，这篇文章是最接近但不是很确定的解决方案，所以这里是:

{ // 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)，但无论如何它在加载下一步并返回正确步骤时都会产生轻弹。

我强烈建议不要使用延迟，它可能看起来适用于您的本地环境，但推测客户端加载需要多长时间是极其危险的。

希望对其他人有帮助!