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. Visual Studio 2012 与此版本的 Windows 不兼容 解决

    警告: [Window Title] 程序兼容性助手[Main Instruction] 此程序存在已知的兼容性问题[Expanded Information] Visual Studio 2012 ...

  2. BZOJ1251 序列终结者（Splay平衡树）（占位）

    网上有许多题,就是给定一个序列,要你支持几种操作:A.B.C.D.一看另一道题,又是一个序列 要支持几种操作:D.C.B.A.尤其是我们这里的某人,出模拟试题,居然还出了一道这样的,真是没技术含量…… ...

  3. python输入空格间隔的一行int

    str = input() list = [int(x) for x in str.split()] print(list) 用py刷题肯定得遇到空格间隔的键入,先str接收键入的一行字串,然后把st ...

  4. SET_Matplotlib

    fig.tight_layout() 调整子图间距 legend 图例分开显示

  5. BZOJ1798：[AHOI2009]维护序列

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

  6. CentOS 6.6 搭建Zabbix 3.0.3 过程

    分享CentOS 6.6下搭建Zabbix 3.0.3 的过程,希望都大家有所帮助. 环境安装 系统环境: # cat /etc/RedHat-release CentOS release 6.6 ( ...

  7. wpf datagrid row的命中测试

    1. 添加鼠标左键处理 AddHandler(DataGrid.MouseLeftButtonDownEvent, new RoutedEventHandler(grdStudyList_MouseL ...

  8. jQuery之简单的表单验证

    html部分: <body> <form method="post" action=""> <div class="in ...

  9. 【旧文章搬运】VC插件中如何获取当前工程的工作目录

    原文发表于百度空间,2014-09-24========================================================================== 好难找的资 ...

  10. 面试题: 数据库 oracle数据库 已看1 意义不大 有用

    Oracle数据库面试题总结 2017年04月27日 22:41:44 阅读数:9271 1.SQL语句分类 DQL(数据查询语言)select DML(数据操作语言)insert.delete.up ...