Joyride Javascript教程不适用于页面加载

Question

EDIT.在尝试了很多不同的解决方案后，我发现当我添加

*= 需要乘坐

对于我的应用程序.css.scss文件，它导致javascript中断(不确定这是否属实：(

我再次在 chrome 上的控制台中对其进行了测试，当我运行时

$("#tutorial").joyride({});

一旦什么都没有出现，但如果我运行两次，那么它就会起作用。所以我的应用程序.js文件现在看起来像：

$(document).ready( function(){       
$("#tutorial").joyride({});
$("#tutorial").joyride({});
});

它只呈现一次教程框，然后当您单击下一步时，它会再次中断。

原始帖子。

我正在我的 rails 应用程序中使用 ZURBS joyride 插件来创建登机教程。 http://zurb.com/playground/jquery-joyride-feature-tour-plugin

我已经使用 chrome 检查器让 javascript 在控制台中工作，但它在页面加载时不起作用。

关于如何解决这个问题的任何想法？

应用程序.js文件

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require d3
//= require jquery.joyride
//= require modernizr.mq.js
//= require jquery.cookie.js
//= require_tree .
$(document).ready(function(){
    $("#tutorial").joyride({});
});

这是我在我的索引.html.erb 文件中使用的

  <ol id='tutorial'>
    <li data-id="story">Tip content...</li>
    <li data-id="story">Tip content 2</li>
  </ol>

这将显示索引中与数据 ID 对应的代码

 <div class="box-container">
  <div id="story" class="box">
    <h1>Welcome to WeWrite. </h1>
    <h3> Write stories together. </h3>
    <% @lines.each do |line| %>
        <div class="story">
            <div class="depth"><%= line.depth %></div> 
            <div class="story-link"><%= link_to "#{line.text}...",  line_path(line), :class => "story-link" %> </div>
        </div>
    <% end %>

将其添加到我的应用程序.js文件中，以查看脚本是否正在加载并且

$(document).ready( function(){      
fireWhenReady();
});
function fireWhenReady() {
if(typeof $("#tutorial").joyride == "function") {
    $("#tutorial").joyride({});
    console.log("joyride");
}
else {
    setTimeout(fireWhenReady, 100);
}
}

Answer 1

您需要

像在演示中一样设置autoStart : true选项。

$(window).load(function() {
    $('#joyRideTipContent').joyride({
        autoStart : true
        ,postStepCallback : function (index, tip) {
            if (index == 2) {
            $(this).joyride('set_li', false, 1);
            }
        }
        ,modal:true
        ,expose: true
    });
});

Answer 2

根据您的评论，我建议使用：

$(window).load(function(){
  $("#tutorial").joyride({});
})

这将确保加载所有内容，甚至是子脚本。

Answer 3

我可以确认相同的行为。Joyride需要调用两次才能启动。

唯一值得注意的补充是列表中的引导程序"隐藏"类。如果我删除它，那么列表始终可见。

出于某种奇怪的原因，以下内容有效：

<h2 id="joyride1">Heading...</h2>
<h2 id="joyride1">Heading...</h2>
<h2 id="joyride1">Heading...</h2>
<h2 id="joyride1">Heading...</h2>
<ol id="joyride" class="hide">
    <li data-id="joyride1" data-text="Next" data-options="tip_location: top; prev_button: false">
        <p>Hello and welcome to the Joyride documentation page.</p>
    </li>
    <li data-id="joyride2" data-text="Next" data-options="tip_location: top; prev_button: false">
        <p>Hello and welcome to the Joyride documentation page.</p>
    </li>
    <li data-id="joyride3" data-text="Next" data-options="tip_location: top; prev_button: false">
        <p>Hello and welcome to the Joyride documentation page.</p>
    </li>
    <li data-id="joyride4" data-text="Next" data-options="tip_location: top; prev_button: false">
        <p>Hello and welcome to the Joyride documentation page.</p>
    </li>
</ol>
$(function () {
    $("#joyride").joyride({});
    $("#joyride").joyride({}); // NEEDED TO START JOYRIDE
});