jQuery 给动态添加元素绑定事件

来源：互联网发布：c语言之父谭浩强编辑：程序博客网时间：2024/05/09 13:19

我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的jquery已经添加了这个功能。我们已经不需要为此烦恼了。

参考：http://api.jquery.com/live/

最普通的动态天剑事件用法是这样：

$('li').click(function(){        alert("点我干么")    })

那我们看一个简单实例，实例1：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>jQuery 动态绑定事件</title>    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script></head><body><h1> jQuery 1.7版本以上 动态添加元素事件绑定 简单实例</h1><ul>    <li>  默认存在,点我试试</li></ul><button onclick="appendTest();"> 追加列表项</button><script>    $('li').click(function(){        alert("点我干么")    })    function appendTest(){        $('li:last').clone().appendTo( $('ul:last'));        $('li:last ').text("动态增加，点我试试");    }    </script></body></html>

实验发现点击默认列表项有反应，但是点击动态增加的列表项是没有反应的，为什么呢？

我们继续看实例2：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>jQuery 动态绑定事件</title>    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script></head><body><h1> jQuery 1.7版本以上 动态添加元素事件绑定 简单实例</h1><ul>    <li onclick="clickTest();">  默认存在,点我试试</li></ul><button onclick="appendTest();"> 追加列表项</button><script>    function appendTest(){        $('li:last').clone().appendTo( $('ul:last'));        $('li:last ').text("动态增加，点我试试");    }    function clickTest(){        alert("点我干么")    }</script></body></html>

实例2跟实例1的区别就在于click 事件不是动态添加的，在动态添加元素（clone）时事件响应也被克隆了，但我们很多时候是想动态添加事件响应，在1.7版本以前使用 live 方法解决这个问题：

用法如下：

    $('.li').live('click', function(){        alert("点我干么")    });

但是在1.7版本以后，live 方法被废弃了，详情参照：

http://api.jquery.com/live/

取而代之的是 on 方法，个人感觉用法变复杂了，但习惯了也还好：

我们将实例1稍加修改，用 on方法实现为动态添加元素绑定事件：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>jQuery 动态绑定事件</title>    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script></head><body><h1> jQuery 1.7版本以上 动态添加元素事件绑定 简单实例</h1><ul>    <li>  默认存在,点我试试</li></ul><button onclick="appendTest();"> 追加列表项</button><script>    $('ul').on('click','li',function(){        alert("点我干么")    })    function appendTest(){        $('li:last').clone().appendTo( $('ul:last'));        $('li:last ').text("动态增加，点我试试");    }</script></body></html>

至于on 方法的详细用法可参照jQuery手册。

0 0