主要区分于：bind ()与live()方法。
.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的：
$('.clickme').live('click', function() {
alert("Live handler called.");
});然后再添加一个新元素：
$('body').append('<div class="clickme">Another target</div>');然后再点击新增的元素，他依然能够触发事件处理函数。
事件委托
.live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。在我们的例子中，当点击新的元素后，会依次发生下列步骤：
- 生成一个click事件传递给 <div> 来处理
- 由于没有事件处理函数直接绑定在 <div> 上，所以事件冒泡到DOM树上
- 事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。
- 执行由 .live() 绑定的特殊的 click 事件处理函数。
- 这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
- 如果找到了匹配的元素，那么调用原始的事件处理函数。
由于只有在事件发生时才会在上面的第五步里做测试，因此在任何时候添加的元素都能够响应这个事件。
0 0
jquery 事件失效问题10
问题如下：
我今天做一个联动下拉框的时候，遇到了一个奇怪的问题，在ready方法里面注册的事件失效了！比如：$("#province"）.change(function(){........})当我改变id为province下拉框的值的时候，这个方法并没有执行！原因如下：
1.html部分代码
Html代码
1. <select id="province">
2. <option value="default">请选择</option>
3. </select>
4. <select id="section">
5. <option value="default">请选择</option>
6. </select>
7. <select id="estate" name="id_area">
8. <option value="default">请选择</option>
9. </select>
<select id="province">
<option value="default">请选择</option>
</select>
<select id="section">
<option value="default">请选择</option>
</select>
<select id="estate" name="id_area">
<option value="default">请选择</option>
</select>
<select id="province">
<option value="default">请选择</option>
</select>
<select id="section">
<option value="default">请选择</option>
</select>
<select id="estate" name="id_area">
<option value="default">请选择</option>
</select>2.部分js代码
Js代码
1. $(document).ready(function(){
2. //发送一个AJAX请求 （获得全国省份信息）
3. $.ajax({
4. type:"post",
5. dataType:"xml",
6. url:"areaAction.do",
7. data:"action=getProvince",
8. success:function(data){
9. //需要追加的字符串
10. var appendHtml="";
11. //循环加载
12. $(data).find("node").each(function(i){
13. appendHtml+="<option value='"+$(data).find("node id").eq(i).text()+"'>"
14. +$(data).find("node name").eq(i).text()+"</option>";
15. }
16. )
17. //追加HTML代码
18. $("#province").append(appendHtml);
19. },
20. error:function(XMLResponse){
21. alert("获取省份信息失败");
22. }
23. });
$(document).ready(function(){
//发送一个AJAX请求 （获得全国省份信息）
$.ajax({
type:"post",
dataType:"xml",
url:"areaAction.do",
data:"action=getProvince",
success:function(data){
//需要追加的字符串
var appendHtml="";
//循环加载
$(data).find("node").each(function(i){
appendHtml+="<option value='"+$(data).find("node id").eq(i).text()+"'>"
+$(data).find("node name").eq(i).text()+"</option>";
}
)
//追加HTML代码
$("#province").append(appendHtml);
},
error:function(XMLResponse){
alert("获取省份信息失败");
}
});当加载html页面的时候，我发送了一个AJAX请求，请求获得全国的省份信息。在
Html代码
1. <select id="province">
2. <option value="default">请选择</option>
3. </select>
<select id="province">
<option value="default">请选择</option>
</select>
<select id="province">
<option value="default">请选择</option>
</select>之间追加了一些选项。如果不发送这个请求，$("#province"）.change(function(){........})函数就会被触发，但是你一但发送，相当于就改变了id为province的下拉框，以前注册的change事件就失效了！至于原因，我也不是很清楚。不过如果这样写就可以：
Js代码
1. $("#province").live("change",function(){.....}）;
$("#province").live("change",function(){.....}）;live事件API文档解释如下
live( type, fn )jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件。 目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。 这个方法跟传统的bind很像，区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说，如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时，对于这个新增加的li，其click事件依然可用。而无需重新给这种新增加的元素绑定事件。 |
