Bootstrap-tour tour.init 不是函数答案

【问题标题】：Bootstrap-tour tour.init is not a functionBootstrap-tour tour.init 不是函数
【发布时间】：2016-12-19 21:58:20
【问题描述】：

我正在尝试让 bootstrap-tour 工作我使用 bootstrap-rails gem 在我的 rails 应用程序中包含 bootstrap rails。

我已经看到许多其他问题通过清除本地存储解决了我已经尝试过修复，但它没有任何结果。我的问题不同，它在到达 init 函数时抛出错误。

TypeError: tour.init is not a function at HTMLBodyElement.ideasTour 

message
:
"tour.init is not a function"
stack
:
"TypeError: tour.init is not a function

我的 cofeescript 被编译为与 bootstrap tour

intros.coffee

ideasTour = ->
    console.log 'function was called'
    tour = new Tour({
        steps:[
        { 
            element: "#step1"
            title: 'Ideas'
            content: 'Ideas are the encapsulating class...' 
        }
        {
            element: "#step2"
            title: "Create a new Idea"
            content: 'lets create a new Idea, click on the add button to start.'
        }
    ],
    debug: true,
    storage: false      
    })
    console.log 'options set initializing...'
    tour.init()
    console.log 'initialized starting...'
    tour.start(true)
    console.log 'called start'

$ ->
    $('body').on('tour', ideasTour)

我的应用程序.js

//= require jquery
//= require jquery_ujs
//= require best_in_place
//= require bootstrap
//= require bootstrap-tour
//= require turbolinks
//= require_tree .    
$ = jQuery;

非常感谢任何帮助。

【问题讨论】：

标签： javascript ruby-on-rails asset-pipeline ruby-on-rails-5 bootstrap-tour

【解决方案1】：

看起来这是一个较老的问题，但这是由于在页面上加载引导程序库之前尝试使用 tour.init() 引起的。确保对 bootstrap-tour.js 或 bootstrap-tour-min.js 的引用。

虽然将 javascript 库引用放置在标签正上方的页面底部是一种很好的做法，但请尝试将库（以及 jQuery 库，如果您不使用独立的 bootstrap-tour）放在可以消除这种“竞争条件”。

如果您使用的是 jquery，您可以利用 jQuery(document).ready 函数，方法是将 tour.init() 调用放在其中，以便它等待所有页面资源在它之前加载到 DOM 中尝试调用它。

【讨论】：