TypeError: $ (...). On non è una funzione

Question

Sto usando jQuery litebox. Dopo aver aggiunto i file JS e CSS ho ottenuto questo errore TypeError:

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

Qualcuno può aiutarmi a capire il problema qui?

Sto facendo questa implementazione in CakePHP 1.3.

Answer 1

La solita causa di questo è che sei anche usando Prototype, MooTools, o qualche altra libreria che fa uso del simbolo $, e il gioco è compresa quella libreria jQuery dopo, e in modo che libreria è " vincere "(prendendo $ per se stesso). Quindi il valore di ritorno di $ non è un'istanza di jQuery e quindi non ha metodi jQuery su di esso (come on).

È possibile utilizzare jQuery con le altre librerie, ma se lo fai, è necessario utilizzare il simbolo jQuery piuttosto che il suo alias $, ad esempio:

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

E di solito è meglio se si aggiunge questo subito dopo il tag script tra cui jQuery, prima di quello compreso l'altra libreria:

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

... non anche se è necessario se si carica il OTH er library dopo jQuery (è se prima carichi l'altra libreria).

L'utilizzo di più librerie di manipolazione DOM a pieno titolo sulla stessa pagina non è l'ideale, tuttavia, solo in termini di peso della pagina. Quindi, se riesci ad usare solo Prototype/MooTools/qualunque o solo jQuery, di solito è meglio.

Answer 2

Il problema potrebbe essere se si sta utilizzando la versione precedente di jQuery. Perché le vecchie versioni di jQuery hanno metodo 'live' al posto di 'on'

Answer 3

questo problema è risolto, nel mio caso, incapsulando la mia jQuery in:

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

Answer 4

Se si utilizza vecchia versione di jQuery (< 1.7) quindi puoi usare "bind" invece di "on". Ciò funzionerà solo nel caso in cui si stia utilizzando la versione precedente, poiché da jQuery 3.0, "bind" è stato deprecato.

Answer 5

ho provato la soluzione di Oskar (e molti altri), ma per me è finalmente solo lavorato con:

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

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