javascript - Bootstrap-tourtour.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 被编译为与示例匹配的 js bootstrap tour

介绍.咖啡

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

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

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

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