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

Posted 2023-03-21

【中文标题】Javascript/JQuery 直到页面重新加载后才工作

【英文标题】：Javascript/JQuery not working until after page reload

【发布时间】：2017-07-24 23:54:38

【问题描述】：

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

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

【问题讨论】：

你能再分享一些代码吗？你指的是什么按钮？按钮上有哪些类？控制台中是否记录了任何 javascript 错误？

如果您将它放在代码的末尾（而不仅仅是标题的末尾）会发生什么？

【参考方案1】：

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

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

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

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

不能在 Skye、Foundry 或 Tudor 中禁用 Ajax。 无法在 Farro 和 Haute 的博客登录页面上禁用 Ajax。如果在这些模板中取消选中 Enable Ajax Loading，它们 仍将使用 Ajax 加载博客页面。

启用或禁用 Ajax：

在主菜单中，单击设计，然后单击样式编辑器。 向下滚动到站点：加载中。 选中或取消选中启用 Ajax 加载。

如果您不想完全禁用 AJAX，请see "Option 2" in this answer 了解编写代码的方法，以便它可以在初始页面加载和 AJAX 页面加载时工作。

【参考方案2】：

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