如何点击启动bootstrap游览？ （在wordpress上）

Question

我想在点击按钮时启动bootstrap tour。但由于一些奇怪的原因，它不起作用。我把js文件放在头部，其余放在一个小部件中（所以在正文中）。如果启用了自动启动，则一切正常（如果页面已加载，则启动）。但是如果单击某个按钮，我想让它工作。

以下代码可以工作：

<script src="https://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://localhost/bodybuildrecepten/wp-content/plugins/bootstrap-tour/bootstrap-tour-standalone.min.js"></script>
<script>
// Instance the tour
var tour = new Tour({
  debug: true,
  storage: false,
  steps: [
  {
    element: "#menu-item-2991",
    title: "Settings",
    content: "Content of settings",
    placement: "right"
  },
  {
    element: "#test2",
    title: "Title of my step",
    content: "Content of my step",
    placement: "right",
    onShow: function() {
      return $("#appSettings").addClass("open");
    },      
    onHide: function() {
      $("#appSettings").removeClass("open"); 
    } 
  }    
]});



  tour.init();
  tour.start();

</script>

但是我想在单击按钮时执行巡视所以我已经创建了一个按钮：

<button id="starttour">Start the tour!</button>

我已将代码更改为（并尝试了其他选项，但没有成功）：

<script src="https://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://localhost/bodybuildrecepten/wp-content/plugins/bootstrap-tour/bootstrap-tour-standalone.min.js"></script>
<script>
// Instance the tour
var tour = new Tour({
  debug: true,
  storage: false,
  steps: [
  {
    element: "#menu-item-2991",
    title: "Settings",
    content: "Content of settings",
    placement: "right"
  },
  {
    element: "#test2",
    title: "Title of my step",
    content: "Content of my step",
    placement: "right",
    onShow: function() {
      return $("#appSettings").addClass("open");
    },      
    onHide: function() {
      $("#appSettings").removeClass("open"); 
    } 
  }    
]});

tour.init();

$("#starttour").click(function(){
    tour.start();
});
</script>

我希望有人能看出出了什么问题。任何帮助表示赞赏！

编辑：试过jQuery而不是美元符号。没有成功。

这些是我的控制台显示的错误：http://oi60.tinypic.com/24y5lz7.jpg

Answer 1

我发现了问题。来自我主题插件的jQuery文件与bootstrap tour相冲突。