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

最新推荐文章于 2020-10-13 09:51:17 发布

浪客剑心697

最新推荐文章于 2020-10-13 09:51:17 发布

阅读量633

点赞数

分类专栏： Javascript 文章标签： jquery 动态添加事件 live on

本文链接：https://blog.csdn.net/langren697/article/details/41806783

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的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 οnclick="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 οnclick="clickTest();">  默认存在,点我试试</li>
</ul>
<button οnclick="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 οnclick="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手册。

浪客剑心697

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 给动态添加元素绑定事件

我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的jquery已经添加了这个功能。我们已经不需要为此烦恼了。参考：http://api.jquery.com/live/ 最普通的动态天剑事件用法是这样：$('li').click(function(){ alert("点我干么") })那我们看一个简单实例，实例1：
复制链接

扫一扫