在单页应用程序中点击返回按钮后单击不起作用答案

【问题标题】：on Click not working after hitting back button in single page app在单页应用程序中点击返回按钮后单击不起作用
【发布时间】：2020-09-24 20:17:50
【问题描述】：

我的 onClick 事件有问题。我在页面加载期间/之后通过 DOM 插入将 HTML 添加到 DOM。我正在处理的页面是一个单页应用程序。

当页面首次加载时，我的点击事件工作正常。当我导航到 SPA 中的下一页，然后单击后退按钮返回原始页面时，onClick 不起作用。

我尝试了 setTimeout 和轮询，但没有任何效果。如果我将它粘贴到 Google 控制台中，onclick 将起作用，但在加载时不起作用。我不太清楚为什么 setTimeout 和轮询不起作用。

//css

.hideIt{display:none;}

//html
<div class="optMbPriceContainer">
  <div class="optMbBaseRow">
   <span class="">Base Price</span>
   <span class="right">$91.79</span>
   <span class="right optMbStrikethruPrice">$101.99</span>
  </div>
 <div class="optMbTaxesRow2">
   <span class="optShowTaxDetails2">Taxes &amp; Fees</span>
   <span class="right">$40.36</span>
   <div class="optTaxDetails2 hideIt" style="">
     <div class="optTaxParent2"><!--taxes go here--></div>
   </div><
 /div>
<div class="optMbTotalRow">
  <span class="optEstTotalTxt">Estimated Total (Prepaid)</span>
  <span class="pull-right">$132.15</span></div>
<div class="optTotalSavings">
  <span class="">Total Savings</span>
  <span class="pull-right optTotalSavingsAmt">$10.20</span>
</div>
</div>



//jquery
angular.element(document).on('click', '.optShowTaxDetails2', function() {
  $('.optTaxDetails2').toggleClass('hideIt');
});

【问题讨论】：

我从未使用过 Angular，但您发布的那段 JS 代码不是在每次页面加载时执行的（即当您通过导航转到另一个页面时）？如果是这种情况，您每次在页面之间导航时都会添加一个新的点击回调。因此，toggleClass() 将在每次点击时执行多次。如果它执行偶数次，则元素的状态（显示/隐藏）似乎不会改变。
@MartinHeralecký 你的评论引发了我的思考。我注意到，当我导航回原始页面时，hideIt 类并未在单击时被删除，因此您的观点听起来是正确的。关于如何防止这种情况发生的任何想法？也许在导航到另一个页面时删除原件？

标签： javascript jquery single-page-application

【解决方案1】：

我发现我最初的 on click 实现是将它绑定到文档而不是元素，这就是我每次导航回页面时都会添加它的原因。相反，我使用了：

 $('.optShowTaxDetails').click(function () {
                 $('.optTaxDetails').toggleClass('hide');
            });

【讨论】：