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. 第十四章-MySQL

    1 安装 MySQL常见的版本 GA: 广泛使用的版本 RC: 最接近正式版本 Alpha和Bean: 内测版本和公测版本 有两种安装方式: 安装包和压缩包 1) 安装msi文件 2) 解压zip文件 ...

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

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

  3. python之网络编程（概述及SOCKET）

    概述(TCP/IP协议是一个协议族): TCP/IP 协议按照四层怎么划分:链路层,网络层,传输层,应用层(实际上是四层) TCP/IP 协议按照七层怎么划分:物理层,数据链路层,网络层,传输层,会话 ...

  4. python后台架构Django教程——manage.py命令

    一.manage.py命令选项 manage.py是每个Django项目中自动生成的一个用于管理项目的脚本文件,需要通过python命令执行.manage.py接受的是Django提供的内置命令. 内 ...

  5. poj3067Japan——树状数组查找逆序对

    题目:http://poj.org/problem?id=3067 利用树状数组查找逆序对. 代码如下: #include<iostream> #include<cstdio> ...

  6. 面向对象（封装）get set的由来

    封装:是指隐藏对象的属性和实现细节,进对外提供公共访问方式 好处:将变化隔离.便于使用,提高重用性,提高安全性 封装原则:将不需要对外提供的额内容隐藏起来,把属性都隐藏,提供公共方法对其访问 pack ...

  7. [CentOS] 结合Nginx部署DotNetCore的demo项目【转载】

    部署前准备 1.VisualStudio2017+.netcore2.0SDK 2.Centos7.2 3.SecureCRT,Xftp(根据自己喜好) 创建WebApi项目 修改Program.cs ...

  8. QT时钟绘制

    Demo的效果 资源占用还能接受 运行久一点内存就下去了 下面是Demo的代码 #include "mainwindow.h" #include "ui_mainwind ...

  9. 软件工程作业——Word Counter

    github地址 https://github.com/Pryriat/Word_Counter 项目说明 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命 ...

  10. EasyUI获取所有选中行中的某一列的值

    var PointIds=[]; for (var i = 0; i < wPoint_rows.length; i++) { //PointIds.push(wPoint_rows[i][&q ...