Estás utilizando $
que usualmente es la variable global que jQuery fija cuando lo cargas, por ejemplo, usando:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
... tus funciones // supongamos que esto es el script de tu pregunta
<script>
</head>
<body>
... shake your body ...
</body>
</html>
Si no tienes $
en el ámbito global, tu script va a tirar ese error.
Supongamos por ejemplo que tienes el siguiente código
var ManipulaDOM = function() {
this.borraElemento = function(selector) {
$(selector).remove();
};
};
eso no tira ningún error. Pero si haces:
var manipulador = new ManipulaDOM();
manipulador.borraElemento('#mi_div');
El intérprete de javascript va a invocar borraElemento
. Adentro se encuentra con $
que no está definida dentro de borraElemento
. Sigue buscándola subiendo en el Stack. Pero tampoco está definida en ManipulaDOM
. Sigue subiendo por el stack hasta que llega al ámbito global, y si resulta que window.$
no está definido, entonces arroja ese error.
Pese a que la mayoría de los sitios web que usan jQuery lo ponen en el <head>
del documento, también es posible ponerlo al final del <body>
(por todas esas buenas prácticas que explican que los scripts son bloqueantes y demoran la carga del DOM). Tú podrías hacer:
<body>
<div id="mi_div">hola</div>
<script>
var ManipulaDOM = function() {
this.borraElemento = function(selector) {
$(selector).remove();
};
};
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var manipulador = new ManipulaDOM();
manipulador.borraElemento('#mi_div');
</script>
</body>
Y eso no arrojaría error, porque cuando declaras lo primero, todavía no ocupas $
y cuando lo invocas, a esa altura $
ya está en el ámbito global.
Raya para la suma: asegúrate de que jQuery se ha cargado antes de usar funciones que usan $
. Y si esas funciones manipulan el DOM, también asegúrate de envolver todo el bloque en $(document).ready(function() { ... });
o cualquiera de sus variantes.