TypeError: $ (...). On nie jest funkcją

Question

Używam jQuery litebox. Po dodaniu plików JS i CSS otrzymałem ten błąd TypeError:

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

Czy ktoś może mi pomóc zrozumieć problem tutaj?

Wykonuję tę implementację w CakePHP 1.3.

Answer 1

Zwykle przyczyną jest to, że jesteś również użyciu prototyp, MooTools, lub jakąś inną bibliotekę, która korzysta z $ symbolem, a ty w tym, że po biblioteki jQuery, i tak, że biblioteka jest " wygrywając "(biorąc dla siebie $). Tak więc wartość zwracana $ nie jest instancją jQuery, więc nie ma na niej metod jQuery (jak on).

Można użyć jQuery z tymi innymi bibliotekami, ale jeśli nie, trzeba użyć jQuery symbol zamiast jego alias $, np

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

I to zazwyczaj najlepiej jeśli dodać to natychmiast po tag script tym jQuery, przed tym drugim jednej biblioteki:

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

... chociaż nie jest to wymagane jeśli załadować oth er biblioteka po jQuery (jeśli najpierw wczytujesz drugą bibliotekę).

Korzystanie z wielu pełnych funkcji bibliotek manipulacji DOM na tej samej stronie nie jest idealne, ale pod względem masy strony. Więc jeśli możesz trzymać się tylko Prototype/MooTools/cokolwiek lub tylko jQuery, zazwyczaj jest lepiej.

Answer 2

Problem może być, jeśli używasz starszej wersji jQuery. Ponieważ starsze wersje jQuery mieć metodę zamiast „on”

Answer 3

Ten problem został rozwiązany, w moim przypadku, przez umieszczenie mojego jQuery w „na żywo”:

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

Answer 4

Jeśli używasz starej wersji jQuery (< 1.7), możesz użyć "bind" zamiast "on". Działa to tylko w przypadku, gdy używasz starej wersji, ponieważ od jQuery 3.0 "bind" jest przestarzałe.

Answer 5

Próbowałem rozwiązanie Oskar (i wiele innych), ale dla mnie to wreszcie działa tylko z:

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

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