相信很多开始学习前端开发的朋友都发生过绑定事件失效的问题，那么究竟是什么原因使得事件失效呢？
这里作者以jquery库编写作为例子。
第一种：直接失效。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //这一行语句的意思是等所有DOM树加载完成后执行绑定事件工作
$("button").click(function(){ //点击事件
$("p").hide(); //隐藏p节点对象
});
});
</script>
</head>
<body>
<h2>This is a test</h2>
<p>This is a test.</p> //点击按钮隐藏此段落
<button type="button">Click me</button>
</body>
</html> 上面的代码中若没有下面此行代码，事件是绑定不了的，这是因为在加载玩DOM树之前绑定事件就已经执行了，这时虽然执行了却找不到节点对象，所以事件会失效。
$(document).ready(function(){ //这一行语句的意思是等所有DOM树加载完成后执行绑定事件工作如果要不使用ready()，使事件绑定则需要将js代码编写在html末端，这样做的原因是使浏览器先加载完页面DOM树信息，再加载js代码段，这样绑定的事件就可以找到对应的节点对象了。
第二种：页面跳转或者局部刷新导致绑定事件失效。
其实一切js绑定事件失效的原因根本上都是因为找不到DOM对象或着DOM对象被替换（当然写错了代码那种就不要说了。。）
我们依旧以上面的代码来讲。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //这一行语句的意思是等所有DOM树加载完成后执行绑定事件工作
$("button").click(function(){ //点击事件
$("p").hide(); //隐藏p节点对象
});
});
</script>
</head>
<body>
<h2>This is a test</h2>
<p>This is a test.</p> //点击按钮隐藏此段落
<div id="div"><button type="button">Click me</button></div>
</body>
</html> 如果此时你的button节点的被包裹于一个用于局部刷新的div块。
1.当页面加载完成后，div代码块中并没有内容，这时你通过局部刷新使button节点显示出来，此时注意：页面已经加载完成了然而你却是在它加载完成后动态的将事件的绑定对象调出来的，显然此时绑定事件会失效。（这里局部刷新的代码不给出，读者根据代码和文字联想即可，道理很简单）。
2.页面加载完成，div初次加载就有button节点，此时是没有问题的。然后使用局部刷新改变div的内容后，再使用局部刷新刷新回来button节点时，此时注意：初次加载的时候事件已经绑定过了节点对象，你使用局部刷新重新刷回来时虽然节点名称参数都是一模一样的但是已经不是同一个DOM对象了，所以重新刷回来后事件会失效。