1

我正在尝试让 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

介绍咖啡

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;

任何帮助是极大的赞赏。

4

1 回答 1

0

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

虽然将 javascript 库引用放置在标签正上方的页面底部是一种很好的做法,但请尝试将库(如果您不使用独立的 bootstrap-tour,则将 jQuery 库)放置在 中,看看是否可以消除这种情况'竞争条件'。

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

于 2018-03-28T17:39:55.517 回答