Javascript 某些按钮和悬停效果已禁用

我创建了一个在SaaS应用程序中使用的入职演练教程，该应用程序正在加载a/B测试软件。巡更在初始页面加载时自动开始。用户可以随时关闭巡更。我使用了localStorage，因此浏览器将回忆用户退出页面的时间点，并且该巡更将在巡更进一步的时间点重新开始。我还有一个“重播”按钮，在巡演运行时禁用，在巡演结束或关闭时启用。重播按钮的选择器为“.tstour replay”。我通过添加一个使用CSS3@keyframes规则的类来设置巡更步骤的移动动画，然后延迟移除该类，以便在用户返回并再次使用下一个动画时，动画将重复。这些被称为“popover-ani1”、“popover-ani2”等

我遇到了一个不经常发生的问题，所以我找不到一个模式来解释它为什么会发生。有时，代码中称为#popoverid1、#popoverid2等或#popooverback1、#popooverback2等的各个巡更模式的“下一步”和“后退”按钮将被禁用。它们对点击没有反应，而且它们都有CSS悬停效果，不能正常工作。但是，“关闭”按钮、.popover close始终有效。我不明白为什么有时候“下一步”和“上一步”按钮完全不可点击，失去了互动性，而“关闭”按钮总是很好

我对JavaScript和jQuery相当陌生。 以下是我的JavaScript代码：

    function tourFunction() {

    $(".tstour-replay").addClass("tstour-replay-disable");
    $("#tstour-start").click(function(){
      //if clicked, do nothing
    });

  $("#popoverid1").click(function() {
    $(".popover1").addClass("popover1-ani").delay(200).fadeOut(50);
    $(".popover2").delay(250).fadeIn(50);
         setTimeout(function() {
         $(".popover1").removeClass("popover1-ani");
            }, 250);
});


 $("#popoverid2").click(function() {
   $(".popover2").fadeOut(50);
    $(".popover3").delay(50).fadeIn(50);
});

$("#popoverback2").click(function() {
  $(".popover2").addClass("popoverback2-ani").delay(200).fadeOut(50);
    $(".popover1").delay(250).fadeIn(50);
   setTimeout(function() {
         $(".popover2").removeClass("popoverback2-ani");
            }, 250);
});

$("#popoverid3").click(function() {
  $(".popover3").addClass("popover3-ani").delay(200).fadeOut(50);
    $(".popover4").delay(250).fadeIn(50);
          setTimeout(function() {
         $(".popover3").removeClass("popover3-ani");
            }, 250);
});


$("#popoverback3").click(function() {
  $(".popover3").addClass("popoverback3-ani").delay(200).fadeOut(50);
      $(".popover2").delay(250).fadeIn(50);
   setTimeout(function() {
         $(".popover3").removeClass("popoverback3-ani");
            }, 250);
});


$("#popoverid4").click(function() {
  $(".popover4").addClass("popover4-ani").delay(200).fadeOut(50);
    $(".popover5").delay(250).fadeIn(50);
          setTimeout(function() {
         $(".popover4").removeClass("popover4-ani");
            }, 250);
});


$("#popoverback4").click(function() {
  $(".popover4").addClass("popoverback4-ani").delay(200).fadeOut(50);
    $(".popover3").delay(250).fadeIn(50);
  setTimeout(function() {
         $(".popover4").removeClass("popoverback4-ani");
            }, 250);
});

$("#popoverid5").click(function() {
  $(".popover5").addClass("popover5-ani").delay(200).fadeOut(50);
    $(".popover6").delay(250).fadeIn(50);
          setTimeout(function() {
         $(".popover5").removeClass("popover5-ani");
            }, 250);
});

$("#popoverback5").click(function() {
  $(".popover5").addClass("popoverback5-ani").delay(200).fadeOut(50);
    $(".popover4").delay(250).fadeIn(50); 
  setTimeout(function() {
         $(".popover5").removeClass("popoverback5-ani");
            }, 250);
});

$("#popoverid6").click(function() {
  $(".popover6").addClass("popover6-ani").delay(200).fadeOut(50);
    $(".popover7").delay(250).fadeIn(50);
          setTimeout(function() {
         $(".popover6").removeClass("popover6-ani");
            }, 250);
});

$("#popoverback6").click(function() {
  $(".popover6").addClass("popoverback6-ani").delay(200).fadeOut(50);
   $(".popover5").delay(250).fadeIn(50);
  setTimeout(function() {
         $(".popover6").removeClass("popoverback6-ani");
            }, 250);  
});

}

function tourReplay() {
   $(".tstour-replay").removeClass("tstour-replay-disable");
     $("#tstour-start").click(function() {
          $(".tstour-replay").addClass("tstour-replay-disable");
            $(".popover1").fadeIn("fast");

  });
}

function disableTourReplay() {
   $(".tstour-replay").removeClass("tstour-replay-disable");
   $("#tstour-start").click(function() {
       //if clicked, do nothing
   });

}

//END FUNCTIONS

$(".popover-btn-start").click(function() {
  $(".tour-container").fadeOut();
  $(".popover7").fadeOut();
  $(".tstour-replay").removeClass("tstour-replay-disable");
       $("#tstour-start").click(function() {
             //if clicked, do nothing
       });
     tourReplay();
});

$(".popover-close").click(function(){
    $(".tour-container").fadeOut();
    $(".popover").fadeOut();
     tourReplay();
});

//BEGIN FUNCTION TRIGGERS

var trigger_flag = localStorage.getItem('tstour');


if (!trigger_flag) {

      disableTourReplay();
      $(".popover1").fadeIn("fast"); 
        tourFunction(); 


} else if (trigger_flag == '1') { //clicked next1

     disableTourReplay();
     $(".popover2").fadeIn("fast");
         tourFunction(); 



} else if (trigger_flag == '2') { //clicked next2
     disableTourReplay();
     $(".popover3").fadeIn("fast");
       tourFunction(); 


} else if (trigger_flag == '3') { //clicked next3
      disableTourReplay();
     $(".popover4").fadeIn("fast");
         tourFunction(); 



} else if (trigger_flag == '4') { //clicked next4

    disableTourReplay();
     $(".popover5").fadeIn("fast");
       tourFunction(); 


} else if (trigger_flag == '5') { //clicked next5

     disableTourReplay(); 
     $(".popover6").fadeIn("fast");
       tourFunction(); 


} else if (trigger_flag == '6' || '7') {  //got to last popover, finished tour or closed out
    tourReplay();
}

//END FUNCTION TRIGGERS  

//BEGIN LOCAL STORAGE SET

$(document).on("click", "#popoverid1", function(e){ 
    localStorage.setItem('tstour', '1');
});

$(document).on("click", "#popoverid2", function(e){
    localStorage.setItem('tstour', '2');
});

$(document).on("click", "#popoverid3", function(e){
    localStorage.setItem('tstour', '3');
});

$(document).on("click", "#popoverid4", function(e){
    localStorage.setItem('tstour', '4');
});

$(document).on("click", "#popoverid5", function(e){
    localStorage.setItem('tstour', '5');
});

$(document).on("click", "#popoverid6", function(e){
    localStorage.setItem('tstour', '6');
});

$(document).on("click", ".popover-btn-start", function(e){
    localStorage.setItem('tstour', '7');
});

$(document).on("click", ".popover-close", function(e){
    localStorage.setItem('tstour', '7');
});

这是HTML

<div class="tour-centered">

  <div id="tstour-start" class="tstour-replay">How Does This Work?</div>

    <div class="popover popover1">
      <div class="popover-right">
        <div id="popover-close" class="popover-close">
            </div>
        <div class="popover-content">
          <div class="popover-title">Employees On Your Calendar</div>
          <div class="popover-body">Here's Jane Deaux, a sample employee. I preloaded some events for her in your calendar.</div>
          <div class="popover-footer">
            <div class="popover-progress">1 of 6</div>
            <div class="popover-buttons">
              <div class="popover-next" id="popoverid1">Next</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="popover popover2">
      <div class="popover-above">
        <div id="popover-close" class="popover-close">
               </div>
        <div class="popover-content">
          <div class="popover-title">Calendar Events</div>
          <div class="popover-body">Notice Jane's name on the calendar. Each listing is a scheduled or pending calendar event.
            <br />
            <br />Hover your mouse over her name to quickly see the event details.</div>
          <div class="popover-footer">
            <div class="popover-progress">2 of 6</div>
            <div class="popover-buttons">
              <div class="popover-back" id="popoverback2">Back</div>
              <div class="popover-next" id="popoverid2">Next</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="popover popover3">
      <div class="popover-above">
        <div id="popover-close" class="popover-close">
               </div>
        <div class="popover-content">
          <div class="popover-title">Add a New Calendar Event</div>
          <div class="popover-body">Double-click on any day to create a new calendar event. Use Jane to try it out and deduct hours from her time-off banks.

           <br /><br />Give it a try. I'll wait right here until you're done.<br /></div>
          <div class="popover-footer">
            <div class="popover-progress">3 of 6</div>
            <div class="popover-buttons">
              <div class="popover-back" id="popoverback3">Back</div>
              <div class="popover-next" id="popoverid3">Next</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="popover popover4">
      <div class="popover-below">
        <div id="popover-close" class="popover-close">
             </div>
        <div class="popover-content">
          <div class="popover-title">Create More Calendar Events</div>
          <div class="popover-body">Great job! You can also click this icon to create more calendar events.</div>
          <div class="popover-footer">
            <div class="popover-progress">4 of 6</div>
            <div class="popover-buttons">
              <div class="popover-back" id="popoverback4">Back</div>
              <div class="popover-next" id="popoverid4">Next</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="popover popover5">
      <div class="popover-below">
        <div id="popover-close" class="popover-close">
                </div>
        <div class="popover-content">
          <div class="popover-title">Customize Your Calendar</div>
          <div class="popover-body">Visit Preferences to customize your calendar event codes, create time-off plans, and much more.</div>
          <div class="popover-footer">
            <div class="popover-progress">5 of 6</div>
            <div class="popover-buttons">
              <div class="popover-back" id="popoverback5">Back</div>
              <div class="popover-next" id="popoverid5">Next</div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="popover popover6">
      <div class="popover-below">
        <div id="popover-close" class="popover-close">
                </div>
        <div class="popover-content">
          <div class="popover-title">Add More Employees</div>
          <div class="popover-body">When you're ready, add more of your employees and create calendar events for them.
            <br />
            <br />The more employees you load and track, the easier it is to avoid scheduling conflicts.</div>
          <div class="popover-footer">
            <div class="popover-progress">6 of 6</div>
            <div class="popover-buttons">
              <div class="popover-back" id="popoverback6">Back</div>
              <div class="popover-next" id="popoverid6">Next</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="popover popover7">
      <div class="popover-content-final">
        <div class="popover-title-final">Ready to Take Back Your Time?</div>
        <div class="popover-btn-start">Start Tracking!</div>
        <div class="popover-help">
          <a href="https://tracksmart.zendesk.com/hc/en-us/requests/new" target="_blank">
      I Need Some Help
      </a></div>
      </div>
    </div>
  </div>

这是怎么回事？
日历上的员工
这是简·多，一个样本员工。我在你的日历上预装了一些她要参加的活动。
第1页，共6页
下一个
日历事件
注意日历上简的名字。每个列表都是一个计划的或挂起的日历事件。



将鼠标悬停在她的名字上，可以快速查看活动详细信息。
第2页，共6页
返回
下一个
添加新的日历事件
双击任意一天以创建新的日历事件。让Jane尝试一下，从她离开银行的时间中扣除小时数。


试试看。我就在这里等你做完。

第3页，共6页
返回
下一个
创建更多日历事件
干得好！您还可以单击此图标创建更多日历事件。
第4页，共6页
返回
下一个
自定义您的日历
访问首选项以自定义日历事件代码、创建休假计划等。
第5页，共6页
返回
下一个
增加员工
准备就绪后，添加更多员工并为他们创建日历事件。



加载和跟踪的员工越多，就越容易避免日程安排冲突。
第6页，共6页
返回
下一个
准备好收回你的时间了吗？
开始追踪！

您能同时显示您的html结构吗？我假设所有的js代码都包装在一个

$（document.ready）（function（）{…您的代码…}）中？我添加了HTML。A/B测试软件将自动添加$（document）.ready（function（）{…您的代码…}）；因此，我不必自己编写这些部分。你能试着用替换所有的单击函数吗。在（“单击”，function（）{…}）上，我试过了，但是“下一步”按钮根本不起作用。不过，我是在将事件绑定到文档。您是否建议将函数绑定到处理程序？类似于$（“#popoverid1”）。在（“单击”上，函数（）{…}）而不是$（“#popoverid1”）。单击（函数（）{…}）。为了帮助我更好地理解，除了语法上的差异，on函数与click有什么不同？element.on（'click'）和element.click之间没有区别，它只是一种快捷方式/语法糖。您可以使用element.on（）同时绑定多个事件，因此它有它的用途。我一直在寻找问题，但无法立即找到。这个小提琴代表这个问题吗？