TypeError es nulo?

Este es un error en Firebug que sigo viendo.TypeError es nulo?

TypeError: $("#gallery-nav-button") is null 
[Break On This Error] 
$('#gallery-nav-button').addClass('animated fadeOutRightBig');

Aquí está mi código:

$(function() { 
    $("#close-gallery-nav-button").click(function() { 
    $('#gallery-nav-button').addClass('animated fadeOutRightBig'); 
    }); 
});

HTML

<div id="gallery-nav-button"> 
    <h4 id="close-gallery-nav-button">X</h4> 
    <h3 class="text-center small-text"><a class="inline text-center small-text" href="#gallery-nav-instruct">Click Here for Gallery <br /> Navigation Instructions.</a></h3> 
</div>

CSS

#close-gallery-nav-button{ 
    text-indent:-9999px; 
    width:20px; 
    height:20px; 
    position:absolute; 
    top:-20px; 
    background:url(/images/controls.png) no-repeat 0 0; 
} 
#close-gallery-nav-button{background-position:-50px 0px; right:0;} 
#close-gallery-nav-button:hover{background-position:-50px -25px;}

Fuente

2012-09-26 L84

Suena como un problema de jQuery. Qué versión estás usando? ¿Estás seguro de que jQuery está cargado? – alexandernst

@alexandernst - Estoy usando 1.8.2 y sí, está cargado. – L84

Tengo varias secuencias de comandos que se ejecutan en esta página y, evidentemente, una escritura fue en conflicto con otra. Para solucionar mi problema añadí jQuery.noConflict();

var $j = jQuery.noConflict(); 
$j(function() { 
    $j("#close-gallery-nav-button").click(function() { 
    $j('#gallery-nav-button').addClass('animated fadeOutRightBig'); 
    }); 
});

Fuente

2012-09-26 23:51:43 L84

También puede poner sus códigos jquery dentro de '(función ($) {// ...}) (jQuery)' – undefined

Más bien al revés: 'jQuery (función ($) {...})' – Bergi

también quiero añadir - porque este es el # 1 de resultados de Google para el mensaje de error importante "TypeError: [x] es nulo" - que la razón más común de una El desarrollador de JavaScript obtendrá esto es que están tratando de asignar un controlador de eventos a un elemento DOM, pero el elemento DOM aún no se ha creado.

El código se ejecuta básicamente de arriba a abajo. La mayoría de los desarrolladores ponen su JavaScript en la cabeza de su archivo HTML. El navegador ha recibido el HTML, CSS y JavaScript del servidor; está "ejecutando"/renderizando la página web; y está ejecutando el JavaScript, pero no ha llegado más lejos en el archivo HTML para "ejecutar"/renderizar el HTML.

Para manejar esto, necesita introducir un retraso antes de que se ejecute JavaScript, como ponerlo dentro de una función que no se llama hasta que el navegador "ejecutó" todo el HTML y desencadena el evento "DOM listo". "

con JavaScript crudo, utilizar window.onload:

window.onload=function() { 
    /*your code here* 
    /*var date = document.getElementById("date"); 
    /*alert(date); 
}

con jQuery, documento de uso inmediato:

$(document).ready(function() { 
    /*your code here* 
    /*var date = document.getElementById("date"); 
    /*alert(date); 
});

esta manera, su JavaScript no se ejecutará hasta que el navegador ha incorporado el DOM , el elemento HTML existe (no nulo :-)) y su JavaScript puede encontrarlo y adjuntar un controlador de eventos.

Fuente

2013-08-27 15:43:11

Estoy de acuerdo con los consejos dados anteriormente, en relación con el evento de carga. https://stackoverflow.com/a/18470043/2115934

Una solución más simple (aunque no necesariamente una mejor) es colocar la etiqueta del script justo antes de la etiqueta del cuerpo de cierre del documento.

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
</head> 
<body> 
<h1></h1> 
<p></p> 
<script src="script.js" type="text/javascript"></script> <!-- PUT IT HERE --> 
</body> 
</html>

Fuente

2013-11-27 18:04:49

Respuesta

Cuestiones relacionadas