jQuery的html()可以给现在元素附加新的元素，innerHTML也可以，那么，如何给这些新生成的元素绑定事件呢？直接在元素还未生成前就绑定肯定是无效的，因为所绑定的元素目前根本不存在。

然而，jQuery为我们提供了一个函数来解决这个问题，它就是.live()（备注：jquery的后期版本变为.on() ），它可以给所有元素绑定事件，不论是已有的，还是将来生成的，比如：

$(‘#div’).live(‘click’,function(){

    //do stuff

});

它还可以同时绑定多个事件： 

$('.hoverme').live('mouseover mouseout', function(event) {

  if (event.type == 'mouseover') {

    // do something on mouseover

  } else {

    // do something on mouseout

  }

});

【实例】

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">

</script>

<html>

    <body>

        <input type="button" name="input[]" value="按钮1" />

        <input type="button" name="input[]" value="按钮2" />

        <input type="button" name="input[]" value="按钮3" />

        <a id="add">添加</a>

    </body>

</html>

<script type="text/javascript">

    $("#add").click(function() {

        var inp = $(":input:last").clone();

        $(":input:last").after(inp);

    })

    // 为每一个button绑定onclick事件，alert一下

    var inputs = document.getElementsByTagName("input");

    for (var i = 0; i < inputs.length; i++) {

        inputs[i].onclick = function() {

            alert("我测试一下");

        }

    }

    $(':input').live('click',function() {

        alert("我再测");

    });

</script>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">

</script>

<html>

    <body>

        <input type="button" name="input[]" value="按钮1" />

        <input type="button" name="input[]" value="按钮2" />

        <input type="button" name="input[]" value="按钮3" />

        <a id="add">添加</a>

    </body>

</html>

<script type="text/javascript">

    $("#add").click(function() {

        var inp = $(":input:last").clone();

		inp2 = inp.val("按钮"+($(":input").length+1));

		inp3 = inp2.attr("id","a"+($(":input").length+1))

        $(":input:last").after(inp3);

    })

    //为每一个button绑定onclick事件，alert一下

    //var inputs = document.getElementsByTagName("input");

	//预先加载，inputs.length最大等于3

    for (var i = 0; i < 99; i++) {

		$("#a"+i).live('click',function(){

			alert($(this).val());

		})

    }

    $(':input').live('click',function() {

        alert($(this).val());

    });

</script>

jQuery:如何给动态生成的元素绑定事件？的更多相关文章

  1. Angular如何给动态生成的元素绑定事件

    在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular ...

  2. jquery给动态生成的元素绑定事件，on函数

    首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...

  3. Angularjs给动态生成的元素绑定事件

    //获取动态生成的元素 getJqforAnguar:function(jqid){ angular.element(document).injector().invoke(function($com ...

  4. Jquery 动态生成的元素绑定事件

    使用 on方法 $("#id1").on("click","#id2",function(){}) 这里要注意的是#id1必须是原来就存在的 ...

  5. [jquery] 给动态生成的元素绑定事件 on方法

    用底下的方法尝试了好多次都失败 $('.del').on('click',function(){ alert('aa'); })// 失败!! 终于在准备放弃前看到一篇博文说的方法 $(documen ...

  6. 用jquery动态生成的元素绑定事件

    $(document).on("click",".class a",function(){ })

  7. jQuery中给动态添加的元素绑定事件

    $(document).on(event,selector,function(){ //do somethimg here! });

  8. jQuery对于动态生成的元素绑定无效的问题～～

    问题:很多时候发现,对动态生成的元素绑定click事件是无效的- 原因:直接绑定到动态生成的元素是无效的,是因为Jquery扫描文档找出所有的$(‘’)元素,并把函数绑定到每个元素的click事件上, ...

  9. jQuery中如何给动态添加的元素绑定事件

    jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...

随机推荐

  1. 【LeetCode】Maximum Product Subarray 求连续子数组使其乘积最大

    Add Date 2014-09-23 Maximum Product Subarray Find the contiguous subarray within an array (containin ...

  2. BZOJ2877：[NOI2012]魔幻棋盘

    浅谈树状数组与主席树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:https://lydsy.com/JudgeOnline/problem. ...

  3. 二叉树遍历入门 Lebal：research

    解决二叉树遍历的画法 对于二叉树的基本概念,一般学生都知道,但对于二叉树的遍历,在实际运用中可以发现很多问题,这里提供一次性彻底解决这个问题的方法. 二叉树的遍历 二叉树的遍历是指不重复地访问二叉树中 ...

  4. Docker入门（二）：安装/卸载

    这个<Docker入门系列>文档,是根据Docker官网(https://docs.docker.com)的帮助文档大致翻译而成.主要是作为个人学习记录.有错误的地方,Robin欢迎大家指 ...

  5. hadoop学习笔记411

    安装hadoop  1. 免秘钥  使用hadoop用户  ssh-keygen -t rsa  cp id_rsa.pub authorized_keys  cat id_rsa.pub>&g ...

  6. Repeater 和 GridView 中数据格式化

    GridView中显示两位小数: <asp:BoundField DataField="investmoney" DataFormatString="{0:f2}& ...

  7. Linux命令总结_touch创建文件

    1.touch命令,用来创建文件或者修改文件时间戳 格式:touch [选项]... 文件... 选项 : -a   或--time=atime或--time=access或--time=use  只 ...

  8. [xdoj1227]Godv的数列(crt+lucas)

    解题关键:1001=7*11*13,模数非常小,直接暴力lucas.递归次数几乎为很小的常数.最后用中国剩余定理组合一下即可. 模数很小时,一定记住lucas定理的作用 http://acm.xidi ...

  9. HeapCreate

    为进程创建新堆,请求分配虚拟内存分页,函数原型如下: HANDLE HeapCreate( DWORD flOptions, SIZE_T dwInitialSize, SIZE_T dwMaximu ...

  10. Halcon - 数据类型

    这里给大家分享 Halcon 的数据类型结构图,方便初学者认知 Halcon 图1 Halcon Datatype