Javascript/JQuery funktioniert erst nach dem erneuten Laden der Seite

Question

Dieser Code ist in der Kopfzeile aller meiner Webseiten aufgeführt. Wenn ich auf einen Link auf meiner Website klicke, kann ich die Schaltflächen auf der Seite erst nach der Aktualisierung verwenden. Wie kann ich das beheben?

<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

Das klingt wie ein Konflikt mit Ihrem benutzerdefinierten Skript und Squarespace's AJAX loading:

Gelegentlich Ajax Links mit eingebetteten benutzerdefinierten Code oder Anker in Konflikt geraten können. Ajax kann auch die Site-Analyse beeinträchtigen und nur auf der ersten Seite protokollieren.

Also, je nach Ihrer Vorlage, können Sie feststellen, dass AJAX deaktivieren eine einfache Lösung:

Sie können Ajax im Style Editor, mit einigen Ausnahmen deaktivieren:

• Ajax kann nicht in Skye, Foundry oder Tudor deaktiviert werden.
• Ajax kann auf der Blog-Zielseite für Farro and Haute nicht deaktiviert werden. Wenn Sie in diesen Vorlagen das Kontrollkästchen "Laden von Ajax aktivieren" deaktivieren, verwenden sie weiterhin , um die Blog-Seite mit Ajax zu laden. Ajax

aktivieren oder deaktivieren:

• im Home-Menü, klicken Sie auf Entwurf, und dann Style Editor klicken.
• Scrollen Sie nach unten zu Site: Loading.
• Aktivieren oder deaktivieren Sie "Ajax laden".

Wenn Sie wollen ganz AJAX nicht deaktivieren, dann so etwas wie die folgenden via Header code injection Einfügen ist oft die Art und Weise (auf neueren Vorlagen, wie zB die Sole/Wright-Familie) zu gehen:

<script> 
    (function() { 
     // Establish a function that does something. 
     var myCustomFunction = function() { 
      // Do stuff here. 
     }; 

     // Initialize the fn on site first-load. 
     document.addEventListener("DOMContentLoaded", myCustomFunction); 

     // Reinit. the fn on each new AJAX-loaded page. 
     window.addEventListener("mercury:load", myCustomFunction); 
    })(); 
</script> 

Wenn das nicht funktioniert, müssen Sie einen Mutationsbeobachter für das body-Element einrichten, um nach Attributänderungen zu suchen, insbesondere id. Zum Zeitpunkt des Schreibens war ein solcher Ansatz für die York/Doncab-Vorlagen erforderlich.

Beachten Sie, dass für einige Seiten, wie die /cart/ Seite dieses Verfahren ausführen kann nicht wie beabsichtigt, eine zusätzliche Notwendigkeit entweder setInterval, requestAnimationFrame oder eine Mutation Beobachter Methode bereits erwähnt zu schaffen.