jquery为动态添加元素添加事件

2024年2月14日 185次阅读 来源: 冰剑

以前我们定义事件，比如为元素定义单击事件是这样写的：

$('input').click(function () {
    //处理代码
});
//或者是
$('.clickme').bind('click', function() {
    // Bound handler called.
});

但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定。即使你使用jquery的clone函数，它并不能将事件也复制（到目前为止我还不清楚它是为什么这样定义，是没法复制还是刻意这么处理，以防止出现某些异常，这还有待去分析一下jquery的源代码）。

现在，使用live你可以轻松搞定，

$('.clickme').live('click', function() {
   // Live handler called.
});

这样，你即使在后面动态插入的元素，也会被绑定事件，

$('body').append('<div class="clickme">Another target</div>');

定义和用法：jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

问题：使用jQuery的live()方法绑定事件，有时会出现重复绑定的情况，如，当点击一个按钮时，此按钮所绑定的事件会并执行n遍。

解决：使用die()方法，在live()方法绑定前，将此元素上的前面被绑定的事件统统解除，然后再通过live()方法绑定新的事件。

//先通过die()方法解除，再通过live()绑定
$("#selectAll").die().live("click",function(){
    //事件运行代码
});
//先通过die()方法解除，再通过live()绑定
$("#selectAll").die().live("click",function(){
    //事件运行代码
});

jQuery 1.7以后就不支持了。。。。

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). – .live() | jQuery API Documentation

    原文作者：冰剑
    原文地址: https://segmentfault.com/a/1190000000338048
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞