TypeError是否为Null？

Question

这是我一直看到的Firebug中的错误.

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

这是我的代码:

JS

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

Answer 1

我还想添加 - 因为这是重要错误消息"TypeError:[x]为null"的#1 Google搜索结果 - JavaScript开发人员获得此问题的最常见原因是他们正在尝试分配事件DOM元素的处理程序,但尚未创建DOM元素.

代码基本上是从上到下运行.大多数开发人员将他们的JavaScript放在HTML文件的头部.浏览器已从服务器接收到HTML,CSS和JavaScript; 正在"执行"/渲染网页; 并且正在执行JavaScript,但它还没有进一步下载HTML文件以"执行"/呈现HTML.

要处理这个问题,你需要在执行JavaScript之前引入一个延迟,比如将它放在一个未调用的函数中,直到浏览器"执行"所有HTML并激活事件"DOM ready".

使用原始JavaScript,使用window.onload:

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

使用jQuery,使用文档准备:

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

这样,在浏览器构建DOM之前,您的JavaScript不会运行,HTML元素存在(不是null :-)),您的JavaScript可以找到它并附加事件处理程序.

Answer 2

我在这个页面上运行了几个脚本,显然一个脚本与另一个脚本冲突.为了解决我的问题,我添加了jQuery.noConflict();

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