Javascript/JQuery not working until after page reload

Question

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>

Answer 1

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 see "Option 2" in this answer for ways to write your code so that it will work on initial page load and on AJAX page loads.

Answer 2

It seems Ajax loads content dynamically and ruins your bindings.

You could call your function after each Ajax request using $.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>