Conflit Javascript en entête vs pied de page

Question

J'ai deux scripts javascript que je veux utiliser, un menu déroulant cliquable et slick.js pour un diaporama d'image. Le menu déroulant cliquable fonctionne uniquement s'il est placé dans l'en-tête, et le slick ne fonctionne que s'il est placé dans le pied de page .... et les deux finissent par se contredire, l'un remplaçant l'autre en fonction de l'emplacement de la bibliothèque javascript. Par exemple, le code suivant ne montre le diaporama:

HEADER:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      // Clickable Dropdown 
      $('.menu-main-menu-container > ul').toggleClass('no-js js'); 
      $('..menu-main-menu-container .js ul').hide(); 
      $('.menu-main-menu-container .js').click(function(e) { 
       $('.menu-main-menu-container .js ul').slideToggle(200); 
       $('.clicker').toggleClass('active'); 
       e.stopPropagation(); 
      }); 
      $(document).click(function() { 
       if ($('.menu-main-menu-container .js ul').is(':visible')) { 
        $('.menu-main-menu-container .js ul', this).slideUp(); 
        $('.menu-main-menu-container').removeClass('active'); 
       } 
      }); 
     }); 
    </script> 

FOOTER:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_url')?>/slick/slick.min.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_url')?>/js/slick.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.slideshow-images').slick({ 

     }); 
    }); 
</script> 

Et dès que je retire « jquery-1.11.0.min.js "à partir du pied de page, le menu déroulant recommence à fonctionner. Comment puis-je faire travailler les deux simultanément?

Answer 1

Vous n'avez besoin de charger jQuery qu'une seule fois.

La raison pour laquelle cela cesse de fonctionner est que lorsque vous le chargez une seconde fois, l'objet jQuery d'origine est remplacé et n'est plus valide. Cependant, le code qui a déjà été exécuté dans votre en-tête est lié à l'objet d'origine, ce qui signifie qu'il ne fonctionne pas lorsque l'événement click est déclenché.

Solution: chargez jQuery une seule fois.