如何在点击时开始 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 游览冲突。