TypeError is Null?

Questo è un errore in Firebug continuo a vedere.TypeError is Null?

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

Ecco il mio codice:

$(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;}

fonte

2012-09-26 L84

Sembra un problema jQuery. Che versione stai usando? Sei sicuro che jQuery sia caricato? – alexandernst

@alexandernst - Sto usando 1.8.2 e sì è caricato. – L84

Ho diversi script in esecuzione su questa pagina e, evidentemente, uno script è stato in conflitto con un altro. Per risolvere il mio problema ho aggiunto jQuery.noConflict();

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

fonte

2012-09-26 23:51:43 L84

Puoi anche inserire i tuoi codici jquery in '(function ($) {// ...}) (jQuery)' – undefined

Piuttosto il contrario: 'jQuery (function ($) {...})' – Bergi

voglio anche aggiungere - perché questo è il # 1 di Google risultati di ricerca il messaggio di errore importante "TypeError: [x] è nullo" - che il più comune motivo per cui un Lo sviluppatore JavaScript otterrà questo è che sta tentando di assegnare un gestore di eventi a un elemento DOM, ma l'elemento DOM non è stato ancora creato.

Il codice è fondamentalmente eseguito dall'alto verso il basso. La maggior parte degli sviluppatori inserisce il proprio JavaScript nella testa del proprio file HTML. Il browser ha ricevuto HTML, CSS e JavaScript dal server; è "in esecuzione"/rendering della pagina Web; e sta eseguendo il codice JavaScript, ma non ha ottenuto più in basso il file HTML per "eseguire"/rendere l'HTML.

Per gestire questo, è necessario introdurre un ritardo prima dell'esecuzione di JavaScript, come inserirlo in una funzione che non viene chiamata fino a quando il browser non ha "eseguito" tutto il codice HTML e attiva l'evento "DOM ready". "

Con grezzo JavaScript, utilizzare window.onload:

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

con jQuery, uso documento pronto:

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

In questo modo, la tua JavaScript non verrà eseguito fino a quando il browser ha costruito il DOM , l'elemento HTML esiste (non null :-)) e il tuo JavaScript può trovarlo e allegare un gestore di eventi ad esso.

fonte

2013-08-27 15:43:11

Sono d'accordo con il parere sopra riportato, relativo all'evento onload. https://stackoverflow.com/a/18470043/2115934

Una soluzione più semplice (sebbene non necessariamente una migliore) consiste nel mettere il tag di script appena prima del tag body di chiusura 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>

fonte

2013-11-27 18:04:49

TypeError is Null?

risposta

Problemi correlati