jquery 新建的元素事件绑定问题(上)

上一篇 / 下一篇 2008-10-20 21:40:00 / 个人分类：jQuery

查看( 1565 ) / 评论( 8 ) / 评分( 30 / 5 )

demo:http://www.cnjquery.com/demo/jquery页面加载完成后元素绑定事件.html

我想很多人都会向我一样曾经被新元素的事件绑定困惑很久也就是
在页面加载完成后给元素绑定了事件，但又新增加的元素上却没有绑定任何事件。

js的事件监听跟css不一样，css只要设定好了样式，不论是原来就有的还是新添加的，都有一样的表现。而事件监听不是，你必须给每一个元素单独绑定事件。

常见的例子是处理表格的时候。每行行末有个删除按钮，点了这个能够删除这一行。

< table >
   < tbody >
   < tr >
   < td > 这行原来就有 td >
   < td >< button class = " del " > 删除 button > td >
   tr >
   < tr >
   < td > 这行原来就有 td >
   < td >< button class = " del " > 删除 button > td >
   tr >
   tbody >
table >

通常，我会这么绑定

jQuery(function($) {
//已有删除按钮初始化绑定删除事件
$(".del").click(function() {
$(this).parents("tr").remove();
});
});

对于在domready之前就存在的删除按钮，一切都很完美。但如果在domready之后用js动态添加几行，那新增的几行中的这些按钮都将失去任何作用。

如何解决这个问题？以下提供4种解决方案：
=============================
0号解决方案——onclick法
如果不顾结构与行为分离的准则的话，通常，我会这么做。
注意，此时的deltr这个function必须是全局函数，得放jQuery(function($) {})外面，放里边就成局部函数了，html里的onclick就调用不到了！

<td><button onclick="deltr(this)">删除button>td>

jQuery(function($){
//添加行
$("#add2").click(function(){
$("#table2>tbody").append('新增行')
});
});
//删除行的函数，必须要放domready函数外面
function deltr(delbtn){
$(delbtn).parents("tr").remove();
};

=============================
1号解决方案——重复绑定法
即，在domready的时候就给已有的元素绑定事件处理函数，
而后当新增加的元素的时候再次绑定。

<td><buttonclass="del">删除button>td>

jQuery(function($){
//定义删除按钮事件绑定
//写里边，防止污染全局命名空间
function deltr(){
$(this).parents("tr").remove();
};
//已有删除按钮初始化绑定删除事件
$("#table3 .del").click(deltr);
//添加行
$("#add3").click(function(){
$('新增行')
//在这里给删除按钮再次绑定事件。
.find(".del").click(deltr).end()
.appendTo($("#table3>tbody"));
});
});

=============================
2号解决方案——事件冒泡法
利用事件冒泡的原理，我们给这个按钮的祖先元素绑定事件处理函数。
然后通过event.target这个对象来判断，这个事件是不是我们要找的对象触发的。
通常可以利用一些DOM属性，比如event.target.className、event.target.tagName等之类的来判断。

<td><buttonclass="del">删除button>td>

jQuery(function($){
//第四个表格的删除按钮事件绑定
$("#table4").click(function(e) {
if (e.target.className=="del"){
$(e.target).parents("tr").remove();
};
});
//第四个表格的添加按钮事件绑定
$("#add4").click(function(){
$("#table4>tbody").append('新增行')
});
});

用户菜单

给我留言
加入好友
发短消息
我的介绍
论坛资料
空间管理

我的栏目

Rails
Java
EJB
Hibernate
JSP
资讯
J2ME
Eclipse
GlassFish
Struts
J2SE
JavaScript
NetBeans
J2EE
jQuery
Spring
74755
JBoss
JSF
Ruby
Flex
Swing

标题搜索

日历

我的存档

2009年01月 2008年12月
2008年11月 2008年10月
2008年09月 2008年08月
2008年07月
查看所有存档

数据统计

访问量: 76699
日志数: 392
文件数: 1
书签数: 1
建立时间: 2008-07-07
更新时间: 2009-01-15

RSS订阅

Open Toolbar

posted on 2010-11-24 17:44 lexus 阅读( ...) 评论( ...) 编辑收藏

当jquery添加新元素后的绑定事件的处理