Bootstrap-Tour Standalone 不工作答案

【问题标题】：Bootstrap-Tour Standalone Not WorkingBootstrap-Tour Standalone 不工作
【发布时间】：2015-07-31 02:38:49
【问题描述】：

我正在尝试对 Bootstrap-tour 进行测试以熟悉它，但我什至无法让他们网站上的基本示例正常工作。

我从网站上删除了示例，并包含了所有适当的文件，但我什么也没得到。控制台中没有错误，什么都没有。

这是下面代码的现场演示。 http://connormckelvey.com/test/test.html

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
    <link href="tour/css/bootstrap-tour-standalone.min.css" rel="stylesheet">
    <script src="tour/js/bootstrap-tour-standalone.min.js"></script>

    <script>
    // Instance the tour
    var tour = new Tour({
      steps: [
      {
        element: "#test",
        title: "Title of my step",
        content: "Content of my step"
      },
      {
        element: "#test1",
        title: "Title of my step",
        content: "Content of my step"
      }
    ]
    });

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();
    </script>
    <style>
        div {
            margin: 20px auto;
            width: 500px;
            padding: 50px;
            background: #EBEBEB;
        }
    </style>
</head>
<body>
    <div id="test">
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
    </div>

    <div id="test1">
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
    </div>
</body>

我很困惑，因为这样的事情很容易使用控制台进行故障排除，但没有任何反馈，我不知道从哪里开始。

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-tour

【解决方案1】：

在控制台中运行脚本会导致它运行（尽管您有布局问题）。您可能需要将游览脚本包装在 document.ready 中，以便等待 DOM 可用：

$(document).ready(function() { ... })

或简写

$(function() { ... });

您也可以将其移至页面底部，就在</body> 之前。

【讨论】：

哇，我不知道我一开始没有添加。那解决了它。不过，我仍然很惊讶我没有在控制台中收到某种“$ 未定义”错误。
$ 在此时定义。 DOM 不是。 jQuery 默默地处理。
感谢您的澄清！
我遇到了类似的问题。但是，这里没有 DOM 加载问题，因为我在 onclick 函数中调用游览构建、init 和 start 方法。没有任何类型的 javascript 错误，但游览没有开始。仍在试图找出原因。查了又查，代码好像没有错。
Allen，onclick 函数也必须包含在 document.ready 中。如果脚本运行时元素不存在，则无法附加事件处理程序。如需进一步帮助，请打开您自己的问题。