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

【问题标题】：How do I stop jQuery TourBus from creating two instances on click?如何阻止 jQuery TourBus 在单击时创建两个实例？
【发布时间】：2016-06-23 20:27:55
【问题描述】：

我正在使用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 两次才能完成游览。有谁知道这可能是什么原因造成的？谢谢！

【问题讨论】：

我从未使用过这个插件，但我怀疑这可能是因为您每次单击按钮时都在初始化和重新初始化插件。查看开发人员的demo code，他在click 事件处理程序之外执行了一次。
@Mikey 成功了，谢谢！我查看了开发人员的演示代码并将我的代码更改为 - <script type="text/javascript"> $(document).ready(function(){ var docsBus = $.tourbus( '#my-tour-id1' ); $(document).on( 'click', '#tourbus-icon', function() { $('#my-tour-id1').trigger('depart.tourbus'); }); }); </script> 我对 jQuery 还很陌生，所以我不明白这里有什么区别。为什么我的代码重新初始化插件？如果您可以将其发布为答案，我将很高兴接受。再次感谢！

标签： javascript php jquery html css

【解决方案1】：

我是这样看的：

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

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

【讨论】：