Javascript / JQuery直到页面重新加载后才能工作

时间:2017-03-05 00:48:57

标签: javascript jquery html web squarespace

此代码列在我所有网页的标题上。当我点击我网站上的链接时,在刷新之前我无法使用页面上的按钮。我该如何解决这个问题?

 <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>

2 个答案:

答案 0 :(得分:3)

这听起来与您的自定义脚本和Squarespace's AJAX loading冲突:

  

有时,Ajax可能会与嵌入式自定义代码或锚点发生冲突   链接。 Ajax还可能干扰站点分析,记录命中   仅限第一页。

因此,根据您的模板,您可能会发现禁用AJAX是一个简单的解决方案:

  

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

     
      
  • 在Skye,Foundry或Tudor中无法禁用Ajax。
  •   
  • 在Farro和Haute的博客登录页面上无法禁用Ajax。如果在这些模板中取消选中“启用Ajax加载”,则为它们   仍将使用Ajax加载博客页面。
  •   
     

启用或禁用Ajax:

     
      
  • 在主菜单中,单击“设计”,然后单击“样式编辑器”。
  •   
  • 向下滚动到“网站:正在加载”。
  •   
  • 选中或取消选中启用Ajax加载。
  •   

如果您不想完全禁用AJAX,那么see "Option 2" in this answer可以编写代码,以便它可以在初始页面加载和AJAX页面加载时使用。

答案 1 :(得分:1)

Ajax似乎动态地加载内容并破坏了绑定。

您可以在每个Ajax请求之后使用$.ajaxComplete()

调用函数

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
  function faqElementClick() {
    $('.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');
      }
    });
  };
  $(document).ready(faqElementClick);
  $( document ).ajaxComplete(faqElementClick);
</script>