Bootstrap-tour tour.init不是一个函数

Question

我正在尝试让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上的示例相匹配的js

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) 

我的application.js

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

任何帮助都是非常感谢的。

Answer 1

这看起来像是一个老问题，但是这是由于在引导导览库加载到页面之前尝试使用tour.init()造成的。确保引用bootstrap-our.js或bootstrap-tour min.js。

虽然将javascript库引用放在页面底部标签的正上方是一个很好的做法，但是尝试在中放置这个库(如果你没有使用独立的bootstrap-tour，还有jQuery库)，看看你是否可以消除这个‘竞态条件’。

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