$ ne fonctionne pas pour jQuery dans un nouveau site Web

Question

J'utilise jQuery depuis plusieurs années maintenant, et après avoir inclus les scripts jQuery dans le site sur lequel je travaille, j'utiliserais toujours le $ pour les objets jQuery. Par exemple:

$('#my_selector').click(function(){... 

j'avais construit un site Web il y a quelques années dans Joomla 1.6 avec plus de 200 pages et jQuery utilisées dans presque tous, tout le $. Maintenant, je reconstruis le site dans Joomla 3.3.0. La chose amusante est, maintenant parfois le $ ne fonctionne tout simplement pas lors de l'identification des objets jQuery, mais quand j'utilise jQuery cela fonctionne. Par exemple. l'exemple de code ci-dessus devrait être changé pour ceci:

jQuery('#my_selector').click(function(){... 

Et cela fonctionne. Et la dernière chose la plus étrange est que sur une page, il semble que le $ fonctionne pour certains de la jQuery mais pas tous. L'erreur que je vois est celui-ci:

TypeError: undefined is not a function 

On dirait que le problème se produit principalement sur les fonctions qui exécutent after load complete circonstances. Quoi qu'il en soit, je me demande simplement si les gens savent pourquoi le $ arrêterait de travailler avec l'identification des fonctions et objets jQuery.

Merci!

Answer 1

Vous utilisez très probablement une bibliothèque conflictuelle, c'est-à-dire: un autre script/bibliothèque qui déclare (et donc remplace) la variable $. Enveloppez tout votre code dans une fermeture, et vous devriez être bon:

(function($) { 
    $('#my_selector').doStuff(); 
})(jQuery) 

Ou, si elle doit être exécutée après le document prêt:

jQuery(document).ready(function($) { 
    $('#my_selector').doStuff(); 
}); 

Answer 2

Êtes-vous ou joomla en utilisant Mootools ou toute autre bibliothèque avec le $? Cela signifie qu'il y a un conflit et que la bonne façon de le résoudre est d'utiliser jQuery au lieu de $.

Answer 3

Joomla 3.x se déplace progressivement vers jQuery et remplace toutes les dépendances de MooTools en chemin.

L'état par défaut consiste à charger en mode jQuerynoConflict(), mais en fonction des caractéristiques utilisées sur une page donnée par les extensions (templates, plug-ins, components ou modules) MooTools peut également être chargé. Cela signifie que sur certaines pages, jQuery est défini et non $ et que sur les autres pages les deux sont définies, cela entraînera évidemment les problèmes que vous voyez. Ajoutez à cela la plupart des extensions tierces de l'ère 1.6 (vous avez fait la mise à niveau vers la ligne 2.5.x en cours de route)? Vous avez juste ignoré ce qui se passait et chargé tout ce dont vous aviez besoin (potentiellement exploser) d'autres bibliothèques) vous devrez généralement trier tous les conflits d'abord.

La seule façon d'utiliser jQuery est d'utiliser le préfixe jQuery.

Vous pouvez lire à propos de using JavaScript frameworks with Joomla here, entre autres choses, il vous offre un mécanisme de preuve d'avenir intégré à Joomla pour le chargement de jQuery.

Pour charger jQuery, utilisez: JHtml::_('jquery.framework');

Pour charger l'appel de base jQuery UI: JHtml::_('jquery.ui');

Comme il a été mentionné, vous pouvez envelopper votre JavaScript dans une fermeture, c'est en fait ce que le noyau com_banners fait dans /media/cbanner.js

var jQuery; 
    (function ($) { 
     $(document).ready(function() { 
      $('#jform_type').on('change', function (a, params) { 
       var v = typeof(params) !== 'object' ? $('#jform_type').val() : params.selected; 
       switch (v) { 
       case '0': 
        // Image 
        $('#image, #url').show(); 
        $('#custom').hide(); 
        break; 
       case '1': 
        // Custom 
        $('#image, #url').hide(); 
        $('#custom').show(); 
        break; 
       } 
      }); 
     }); 
    })(jQuery);