web-dev-qa-db-fra.com

TypeError: $ (...). On n'est pas une fonction

J'utilise jQuery litebox . Après avoir ajouté les fichiers JS et CSS, j'ai eu l'erreur TypeError: 

$(...).on is not a function at this line in js file                                           
 "return  $('body').on('click',       
'a[rel^=lightbox], area[rel^=lightbox]', function(e) {"

Quelqu'un peut-il m'aider à comprendre le problème ici?

Je fais cette implémentation dans CakePHP 1.3. 

jquerycakephp-1.3lightbox
31
user1613870

Le problème peut être si vous utilisez une ancienne version de jQuery. Parce que les anciennes versions de jQuery ont la méthode 'live' au lieu de 'on'

54
Shivang Gupta

La cause habituelle en est que vous utilisez aussi avec Prototype, MooTools ou une autre bibliothèque utilisant le symbole $, et que vous incluez cette bibliothèque après jQuery. gagnant "(en prenant $ pour lui-même). Donc, la valeur de retour de $ n'est pas une instance de jQuery et ne contient donc aucune méthode jQuery (comme on).

Vous pouvez utiliser jQuery avec ces autres bibliothèques, mais si vous le faites, vous devez utiliser le symbole jQuery plutôt que son alias $, par exemple:

jQuery('body').on(...);

Et il est généralement préférable d'ajouter ceci immédiatement après votre balise script, y compris jQuery, avant celle contenant l'autre bibliothèque:

<script>jQuery.noConflict();</script>

... bien que ce ne soit pas requis si vous chargez l'autre bibliothèque après jQuery (c'est le cas si vous chargez d'abord l'autre bibliothèque).

L'utilisation de plusieurs bibliothèques de manipulation DOM complètes sur la même page n'est pas idéale, toutefois, en termes d'épaisseur de page. Donc, si vous pouvez vous en tenir à Prototype/MooTools/que ce soit ou simplement à jQuery, c'est généralement mieux.

29
T.J. Crowder

Ce problème est résolu, dans mon cas, en encapsulant mon jQuery dans: 

(function($) {
//my jquery 
})(jQuery);
9
Oskar

Si vous utilisez une ancienne version de jQuery (<1.7), vous pouvez utiliser "bind" au lieu de "on". Cela ne fonctionnera que dans le cas où vous utiliseriez une ancienne version, car depuis jQuery 3.0, "bind" était obsolète.

3
Adhish

J'ai essayé la solution d'Oskar (et beaucoup d'autres) mais pour moi, elle n'a finalement fonctionné qu'avec:

jQuery(function($){
   // Your jQuery code here, using the $
});

Voir: https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

0
ownking