如何阻止jQuery TourBus在点击时创建两个实例？

Question

我正在使用jQuery Tourbus来引导用户浏览我的网站。我希望它在第一次有人访问时显示加载窗口但在此之后它不应该加载，除非用户点击信息图标。

为了确保它仅在用户第一次访问时自动加载，我这样做了 -

<?php
    if($tourbus_verify==0) {
?>

<script type="text/javascript">
$(window).load( function() {
    var tour = $('#my-tour-id').tourbus( {} );
    tour.trigger('depart.tourbus');
} );
</script>

<?php
    }
?>

加载页面后，我有一个方法将值1输入数据库。因此，如果用户第一次访问，则$tourbus_verify将为0，因此当页面加载时会加载游览。如果用户之前已访问过此页面，则$tourbus_verify将为1，因此不会自动加载。

它加载的游览如下 -

<ol class='tourbus-legs' id='my-tour-id'>

  <li data-orientation='centered' data-width='400'>
    <p>Hello</p>
    <a href='javascript:void(0);' class='tourbus-next'>Next</a>
  </li>

  <li data-el='#stuff' data-orientation='top' data-width='400'>
    <p>That's awesome</p>
    <a href='javascript:void(0);' class='tourbus-prev'>Previous</a>
    <a href='javascript:void(0);' class='tourbus-next'>Next</a>
  </li>

  <li data-el='#tourbus-restart' data-orientation='left' data-width='400'>
    <p>Bye</p>
    <a href='javascript:void(0);' class='tourbus-stop'>End!</a>
  </li>

</ol>

到目前为止，一切运作良好。现在，我有一个图标，点击后加载游览 -

<div class="row-fluid">
   <span style="cursor: pointer;" id="tourbus-restart">
      <i class="fa fa-info" aria-hidden="true"></i>
   </span>
</div>

在页面的最后，我有 -

<script type="text/javascript">
$("#tourbus-restart").click(function(){
    var tourclick = $('#my-tour-id1').tourbus( {} );
    tourclick.trigger('depart.tourbus');
});
</script>

这会加载与之前相同的游览，但使用不同的ID -

<ol class='tourbus-legs' id='my-tour-id1'>

      <li data-orientation='centered' data-width='400'>
        <p>Hello</p>
        <a href='javascript:void(0);' class='tourbus-next'>Next</a>
      </li>

      <li data-el='#stuff' data-orientation='top' data-width='400'>
        <p>That's awesome</p>
        <a href='javascript:void(0);' class='tourbus-prev'>Previous</a>
        <a href='javascript:void(0);' class='tourbus-next'>Next</a>
      </li>

      <li data-el='#tourbus-restart' data-orientation='left' data-width='400'>
        <p>Bye</p>
        <a href='javascript:void(0);' class='tourbus-stop'>End!</a>
      </li>

    </ol>

出于某种原因，这种方法效果很好，但第二次引发了另一个巡视实例，所以我最终同时运行了两个巡视路线，如下图所示 -

所以，我必须点击每个Next两次才能完成巡视。有谁知道是什么原因引起的？谢谢！

Answer 1

我这样看：

行$(selector).tourbus()用于初始化插件并将一些功能绑定到元素selector。当您将其放在click事件处理程序中时，只在单击时才初始化该元素。因此，如果您单击两次，则表示您正在初始化两次。我只能假设点击三次会在元素上初始化插件三次;等等。再次初始化时，先前的实例仍保持附加元素。

因此，通过将该行放在click事件处理程序之外，您可以确保该插件只初始化一次。