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. 机器学习：simple linear iterative clustering (SLIC) 算法

    图像分割是图像处理,计算机视觉领域里非常基础,非常重要的一个应用.今天介绍一种高效的分割算法,即 simple linear iterative clustering (SLIC) 算法,顾名思义,这 ...

  2. hdu畅通工程

    传送门 畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  3. C++之迭代器失效总结

    1. 对于序列式容器(如vector,deque),序列式容器就是数组式容器,删除当前的iterator会使后面所有元素的iterator都失效.这是因为vetor,deque使用了连续分配的内存,删 ...

  4. js中变量声明提前

    demo1: var a=10; function b(){alert(a); var a=20; alert(a)} b()//undefined 20 因为:js编译器在执行b这个函数时,会把函数 ...

  5. matlab函数 bwperim

    功能:查找二值图像的边缘. 用法: BW2 = bwperim(BW1) BW2 = bwperim(BW1,conn) BW2 = bwperim(BW1,conn)表示从输入图像BW1中返回只包括 ...

  6. echo命令的简单用法和实例

    在CentOS 6.8版本下,通过实例的形式,展现选项和参数的灵活运用,可以简明的了解echo的用法. 一.语法:echo [SHORT-OPTION]… [STRING]… :echo [选项]…[ ...

  7. js取得数组重复元素

    function duplicates(arr) { var result=[]; arr.sort();//进行排序,重复的都相邻了 ;i<arr.length;i++){ ]&&am ...

  8. xml约束(转)

    在XML技术里,可以编写一个文档来约束一个XML文档的书写规范,这称之为XML约束. 常用的约束技术XML DTD :XML Schema. XML Schema 也是一种用于定义和描述 XML 文档 ...

  9. Windows下caffe安装详解(仅CPU)

    本文大多转载自 http://blog.csdn.net/guoyk1990/article/details/52909864,加入部分自己实战心得. 1.环境:windows 7\VS2013 2. ...

  10. qt5.3+vs2013乱码

    解决qt5.3+vs2013乱码,在main函数之前加入 #if _MSC_VER >= 1600 #pragma execution_character_set("utf-8&quo ...