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

Question

该代码列在我的所有网页的标题上。当我在网站上单击链接时，直到刷新后才能使用页面上的按钮。该如何解决？

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

- Hazzyq

---

你能分享更多的代码吗？你指的是哪些按钮？这些按钮上有哪些类？控制台中是否记录了任何JavaScript错误？ - san

如果你将这个放在代码结尾（而不仅仅是头文件结尾），会发生什么？ - Jason Fel

Answer 1

这听起来像是与你的自定义脚本和Squarespace的AJAX加载冲突：

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

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

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

Skye、Foundry或Tudor中无法禁用Ajax。 Farro和Haute的博客首页无法禁用Ajax。如果在这些模板中取消勾选“启用Ajax加载”，它们仍将使用Ajax加载博客页面。

启用或禁用Ajax：

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

如果您不想完全禁用AJAX，则可以查看此答案中的“选项2”，了解如何编写代码，使其在初始页面加载和AJAX页面加载时均可正常工作。

- Brandon

Answer 2

似乎Ajax会动态加载内容并破坏你的绑定。可以使用$.ajaxComplete()在每个Ajax请求后调用您的函数。"Original Answer"翻译成"最初的回答"。

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

- Daut