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>

Can you share some more code? What buttons are you referring to? What classes are present on the buttons? Are there any javascript errors logged in the console? — san, Mar 05 '17 at 00:51
What happens if you were to put this at the end of your code (not just the end of header)? — Jason Fel, Aug 16 '17 at 12:55

Brandon · Answer 1 · 2019-02-19T13:16:32.980

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.

Daut · Answer 2 · 2020-03-04T08:27:02.150

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>

Javascript/JQuery not working until after page reload

2 Answers2

Linked