+ -
当前位置:首页 → 问答吧 → 请问JQuery丢失DOM事件怎么办?

请问JQuery丢失DOM事件怎么办?

时间:2009-05-15

来源:互联网

我开始建立了一个DOM树,结构如下

<div>
    <ul>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
        <li>11111111</li>
    </ul>
</div>

在装载页面的时候li节点添加了一些事件,后来又通过操作,新添加了几个li节点,结果新添加的这几个节点没有了事件,我不知道该怎么解决,望高手指教。

作者: 慕唯   发布时间: 2009-05-15

添加节点后再次绑定事件即可

事件绑定只对当前存在的对象有效

如果你用的是某些标准事件(如click)的话,可以用live方法绑定

作者: keakon   发布时间: 2009-05-15

谢谢你,能不能详细说明一下,我还不太会

作者: 慕唯   发布时间: 2009-05-15

你把你代码贴出来吧

作者: keakon   发布时间: 2009-05-15

能加我QQ吗??

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个事件的效率高,相信你也能自行分辨了。

作者: sdlddr   发布时间: 2009-07-25

相关阅读 更多