请问JQuery丢失DOM事件怎么办?
时间:2009-05-15
来源:互联网
我开始建立了一个DOM树,结构如下
<div>
<ul>
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
</ul>
</div>
在装载页面的时候li节点添加了一些事件,后来又通过操作,新添加了几个li节点,结果新添加的这几个节点没有了事件,我不知道该怎么解决,望高手指教。
<div>
<ul>
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
</ul>
</div>
在装载页面的时候li节点添加了一些事件,后来又通过操作,新添加了几个li节点,结果新添加的这几个节点没有了事件,我不知道该怎么解决,望高手指教。
作者: 慕唯 发布时间: 2009-05-15
添加节点后再次绑定事件即可
事件绑定只对当前存在的对象有效
如果你用的是某些标准事件(如click)的话,可以用live方法绑定
事件绑定只对当前存在的对象有效
如果你用的是某些标准事件(如click)的话,可以用live方法绑定
作者: keakon 发布时间: 2009-05-15
谢谢你,能不能详细说明一下,我还不太会
作者: 慕唯 发布时间: 2009-05-15
你把你代码贴出来吧
作者: keakon 发布时间: 2009-05-15
能加我QQ吗??
6002458
6002458
作者: 慕唯 发布时间: 2009-05-15
除非在特殊情况下, 否则每一个js事件(例如:click, mouseover等.)都会冒泡到父级节点。
当我们需要给多个元素调用同个函数时这点会很有用。
代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次。
比如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class
传统的做法是,直接选中input,然后绑定focus等,如下所示:
$("#entryform input").bind("focus", function(){
$(this).addClass("selected");
}).bind("blur", function(){
$(this).removeClass("selected");
});
当然上面代码能帮我们完成相应的任务,但如果你要寻求更高效的方法,请使用如下代码:
$("#entryform").bind("focus", function(e){
var $cell = $(e.target); // e.target 捕捉到触发的目标元素
$cell.addClass("selected");
}).bind("blur", function(e){
var $cell = $(e.target);
$cell.removeClass("selected");
});
通过在父级监听获取焦点和失去焦点的事件,对目标元素进行操作。
在上面代码中,父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件。
如果你发现你给很多元素绑定了同一个事件监听, 那么现在的你肯定知道哪里做错了。
同理,在Table操作时,我们也可以使用这种方式加以改进代码:
普通的方式:
$('#myTable td').click(function(){
$(this).css('background', 'red');
});
改进方式:
$('#myTable').click(function(e) {
var $clicked = $(e.target);
$clicked.css('background', 'red');
});
假设有100个td,在使用普通的方式的时候,你绑定了100个事件。
在改进方式中,你只为一个元素绑定了1个事件,
至于是100个事件的效率高,还是1个事件的效率高,相信你也能自行分辨了。
当我们需要给多个元素调用同个函数时这点会很有用。
代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次。
比如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class
传统的做法是,直接选中input,然后绑定focus等,如下所示:
$("#entryform input").bind("focus", function(){
$(this).addClass("selected");
}).bind("blur", function(){
$(this).removeClass("selected");
});
当然上面代码能帮我们完成相应的任务,但如果你要寻求更高效的方法,请使用如下代码:
$("#entryform").bind("focus", function(e){
var $cell = $(e.target); // e.target 捕捉到触发的目标元素
$cell.addClass("selected");
}).bind("blur", function(e){
var $cell = $(e.target);
$cell.removeClass("selected");
});
通过在父级监听获取焦点和失去焦点的事件,对目标元素进行操作。
在上面代码中,父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件。
如果你发现你给很多元素绑定了同一个事件监听, 那么现在的你肯定知道哪里做错了。
同理,在Table操作时,我们也可以使用这种方式加以改进代码:
普通的方式:
$('#myTable td').click(function(){
$(this).css('background', 'red');
});
改进方式:
$('#myTable').click(function(e) {
var $clicked = $(e.target);
$clicked.css('background', 'red');
});
假设有100个td,在使用普通的方式的时候,你绑定了100个事件。
在改进方式中,你只为一个元素绑定了1个事件,
至于是100个事件的效率高,还是1个事件的效率高,相信你也能自行分辨了。
作者: sdlddr 发布时间: 2009-07-25
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28