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. Codeforces Gym 101190 NEERC 16 .D Delight for a Cat （上下界的费用流）

    ls是一个特别堕落的小朋友,对于n个连续的小时,他将要么睡觉要么打隔膜,一个小时内他不能既睡觉也打隔膜 ,因此一个小时内他只能选择睡觉或者打隔膜,当然他也必须选择睡觉或打隔膜,对于每一个小时,他选择睡 ...

  2. 高性能MySQL之【第十六章MySQL用户工具】学习记录

    接口工具:      Msql Workbench   http://www.mysql.com/products/workbench      SQLyog  http://www.webyog.c ...

  3. 如何卸载ubuntu软件

    你的硬盘空间已经不太足够了?如果你使用的是Ubuntu操作系统,你可能想知道如何能够卸载过时.无用的程序.有几种方法可以卸载程序,包括图形化方法和命令行方法.参考本指南,采用最适合你的方法卸载程序. ...

  4. ACM学习历程—HDU5410 CRB and His Birthday（动态规划）

    Problem Description Today is CRB's birthday. His mom decided to buy many presents for her lovely son ...

  5. ACM学习历程—NPU1086 随机数 2015年陕西省程序设计竞赛网络预赛（正式赛）C题 （计数排序 || set容器）

    Description 开学了,ACM队的边老板想在学校中请一些妹子一起做一项问卷调查,调查妹子们对ACM的了解情况,为了实验的客观性,他先用计算机生成了N个1到1000之间的随机整数(N≤100), ...

  6. [转]BX9054: 各浏览器对 document.execCommand 方法的首参数可选值范围存在差异

    作者:钱宝坤 标准参考 无. 问题描述 execCommand 方法通常用于控制可编辑的 IFRAME 内容,制作富文本编辑器. 但他现在为止还是非标准的,方法的首参数 Commmands 的可选值由 ...

  7. hive通过spark导入hbase

    发现采用shcjar的话,总是执行到某个点就停止了 于是我打算尝试一下直接说哦用org.apache.hadoop.hbase.spark这个datasource看看 确实不行,即使没有createt ...

  8. Python中日志的格式化输出

    import logging logfile = 'e:\\a.txt' # logging.basicConfig(filename=logfile,level=logging.INFO) # lo ...

  9. 面向对象——final关键字

    继承的弊端:打破了封装性 解决方式:final final关键字的特点: 1.final是一个修饰符,即可以修饰类,也可以修饰方法,还可以修饰变量 2.final修饰的类不可以被继承 3.final修 ...

  10. Redux API之Store

    Store Store 就是用来维持应用所有的 state 树 的一个对象. 改变 store 内 state 的惟一途径是对它 dispatch 一个action. Store 不是类.它只是有几个 ...