如何在点击时开始引导之旅？ （在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 文件与引导程序浏览冲突。