直到页面重新加载后，JavaScript / JQuery才能正常工作 [英] Javascript/JQuery not working until after page reload

问题描述

此代码已列在我所有网页的标题中。当我点击我网站上的链接时，我无法使用页面上的按钮，直到我刷新。我该如何解决这个问题？

 < script src =https://code.jquery.com/jquery-2.1。 3.min.js>< /脚本> 
 
< script type =text / javascript> 
 $（document）.ready（function（）{
 $（'。faqElement'）。click（function（）{
 var faqElement = $（this）; 
 var question = faqElement.find（'。faqQuestion'）; 
 var answer = faqElement.find（'。faqAnswer'）; 
 if（！answer.hasClass（'activeFaqAnswer'））{
 $（'。faqElement'）。removeClass（'flipButton'）; 
 faqElement.addClass（'flipButton'）; 
 $（'。activeFaqAnswer'）。css（'max-height'，'' ）; 
 $（'。faqAnswer'）。removeClass（'activeFaqAnswer'）; 
 answer.css（'max-height'，'none'）; 
 answer.css（'max （））; 
 answer.addClass（'activeFaqAnswer'）; 
} 
}）; 
}）; 
< / script> 
  

解决方案

这听起来像是与您的自定义脚本冲突， a Squarespace的AJAX加载：$ b $ hs = b

偶尔，Ajax可能会与嵌入的自定义代码或
链接相冲突。 Ajax也会干扰网站分析，只在
的第一页上记录点击。

所以，根据您的模板，您可能会发现禁用AJAX是一个简单的解决方案：

您可以在样式编辑器中禁用Ajax，但有一些例外：

• Ajax无法在Skye，Foundry或Tudor中禁用。 Farro和Haute的博客登陆页面。如果您在这些模板中取消选中启用Ajax加载，那么它们
  仍然会使用Ajax加载博客页面。
  

启用或禁用Ajax：

• 在主菜单中，单击设计，然后单击样式编辑器。 >向下滚动到网站：正在加载。


• 选中或取消选中启用Ajax加载。
  

  如果您不想完全禁用AJAX，那么插入如下所示的通常是要走的路（在新的模板上，比如Brine / Wright系列）：
  
  

   < script> 
  （function（）{
   //建立一个可以执行某些操作的函数
   var myCustomFunction = function（）{
   //在这里做的东西
  }; 
   
   //在站点初次加载时初始化fn 
   document.addEventListener（DOMContentLoaded，myCustomFunction）; 
   
   // Reinit。每个新的fn AJAX加载页面
   window.addEventListener（mercury：load，myCustomFunction）; 
  }）（）; 
  < / script> 
    

  如果这不起作用，那么您必须在body元素上设置一个突变观察者来观察用于属性更改，特别是 id 。请注意，对于某些页面，如 / < cart / 页面，此方法可能无法按预期执行，从而创建对 setInterval ， requestAnimationFrame 或前面提到的突变观察方法。
  

  This code is listed on the header of all of my webpages. When I click a link on my website, I'm unable to use the buttons on the page until after I refresh. How can I fix this?

   <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  
   <script type="text/javascript">
      $(document).ready(function() {
          $('.faqElement').click(function() {
              var faqElement = $(this);
              var question = faqElement.find('.faqQuestion');
              var answer = faqElement.find('.faqAnswer');
              if (!answer.hasClass('activeFaqAnswer')) {
                $('.faqElement').removeClass('flipButton');
                faqElement.addClass('flipButton');
                $('.activeFaqAnswer').css('max-height', '');
                $('.faqAnswer').removeClass('activeFaqAnswer');
                answer.css('max-height', 'none');
                answer.css('max-height', answer.height());
                answer.addClass('activeFaqAnswer');
              }
          });
        });
    </script>
  

  解决方案

  This sounds like a conflict with your custom script and Squarespace's AJAX loading:

  Occasionally, Ajax may conflict with embedded custom code or anchor links. Ajax can also interfere with site analytics, logging hits on the first page only.

  So, depending on your template, you may find that disabling AJAX is a simple solution:

  You can disable Ajax in the Style Editor, with some exceptions:

  • Ajax can't be disabled in Skye, Foundry, or Tudor.
  • Ajax can't be disabled on the blog landing page for Farro and Haute. If you uncheck Enable Ajax Loading in these templates, they will still use Ajax to load the Blog Page.

  To enable or disable Ajax:

  • In the Home Menu, click Design, and then click Style Editor.
  • Scroll down to Site: Loading.
  • Check or uncheck Enable Ajax Loading.

  If you do not want to disable AJAX altogether, then inserting something like the following via Header code injection is often the way to go (on newer templates, such as the Brine/Wright family):

  <script>
      (function() {
          // Establish a function that does something.
          var myCustomFunction = function() {
              // Do stuff here.
          };
  
          // Initialize the fn on site first-load.
          document.addEventListener("DOMContentLoaded", myCustomFunction);
  
          // Reinit. the fn on each new AJAX-loaded page.
          window.addEventListener("mercury:load", myCustomFunction);
      })();
  </script>
  

  If that doesn't work, then you have to setup a mutation observer on the body element to watch for attribute changes, notably the id. At time of writing, such an approach was necessary for the York/Doncab family of templates.

  Note that for some pages, such as the /cart/ page, this method may not execute as intended, creating an additional need for either setInterval, requestAnimationFrame or a mutation observer method mentioned previously.

  这篇关于直到页面重新加载后，JavaScript / JQuery才能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！