今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老,于是结合网上加上自己的测试,找到了一种解决方法。

　　我使用的jquery是1.9.11,jquery1.7之后就将live方法废弃了,新增了on和off方法,我的解决办法就是使用on方法,首先看代码：

    <div class="h3">

        <h3>李健1</h3>

        <h3>李健2</h3>

        <h3>李健3</h3>

        <h3>李健4</h3>

        <h3>李健5</h3>

    </div>

    <div class="div">增加</div>        
　　　　$(function(){

            $(".div").click(function(){

                var h = "";

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

                    h += "<h3>李健"+i+i+"</h3>";

                }

                $(".h3").append(h);

            });

　　　　});
//这里我每点击增加一次会在<div class="h3">最后增加5行<h3>李健i</h3>,我现在要让所有的<h3>都绑定click事件(包括动态生成的)

　　$(".h3").on("click","h3",{foo:"文本:"},function(event){
　　　　alert(event.data.foo+this.textContent);
　　});

是不是很简单,这里选择<div class="h3">作为父元素调用on方法绑定click事件,这样父元素下的所有元素都绑定了click事件,有时候并不需要所有的都绑定,那怎么办？好办,只需在"click"后增加选择器(也就是你想选定的子元素),{foo:"文本:"}:表示传给event.data的数据(参数),在处理函数中我们可以调用event.data.foo读取到传入的函数值。打开浏览器调试工具你还可以获取<h3>中的文本,我这里是this.textContent,大家可以根据实际情况发挥。

　　总之,记住如果你要绑定动态生成的元素事件，一定要先找到他的父元素(父元素不能是动态生成的,否则继续往上找),在父元素中绑定，然后再进行过滤就ok了,对了，我测试了hover事件发现不行,没去深究原因。

一、问题描述

　　用jQuery的append()方法动态添加了一段html代码之后，发现在为新添加的元素绑定click事件时无法获取该新元素。

二、解决方法

　　度娘推荐的方法基本是用live()方法

　　live()的官方定义和用法:

　　live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

　　live()的详细使用方法可以查看jQuery live()

　live()和bind()的区别就是live不仅可以给页面中现有的元素绑定事件，还可以给将来动态添加进来的元素绑定时间。

　　于是我用live()替换了bind(),但报出了新错误：TypeError: $(...).live is not a function

　　经过查询以后发现，原来是jQuery 1.9及其以上已经无法使用live（），可以用on()方法代替live().

　　on()的官方定义和用法:

　　on() 方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

　　注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

　　on()的详细使用方法可以查看jQuery on()

三、代码演示

html页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>jQuery on()方法测试</title>
</head>
<body>
<button id="click1">Click me!</button>
<p>Hello,</p>
<script src="js/jquery.min.js"></script>
<script src="js/test.js"></script>
</body>
</html>

test.js：

1
2
3
4
5
6
7
8
9
$().ready(function(){
  $("#click1").bind("click",function(){
    $("p").append("<div class='new'><b>I'm clicked!</b></div>");
  });
  //on方法要先找到原选择器（p),再找到动态添加的选择器（.new)
  $("p").on("click",".new",function(){
　　　　$(this).remove();
  });
});

　　test.js中第6行实现了为动态添加的.new元素绑定click事件。应注意的是，虽然是为.new绑定事件，但on()方法却是绑定在原选择器<p>上的，然后将.new放在了参数列表中，原理参照上文on()的官方定义和用法。

jquery动态生成html代码绑定事件的更多相关文章

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

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

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

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

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

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

  4. jq给动态生成的标签绑定事件的几种方法

    经常遇到给动态生成的标签绑定事件不好用,自己简单测试总结了下,结论如下了: body> <!-- 下面是用纯动态方式生成标签 --> <div id="d2" ...

  5. jQuery:如何给动态生成的元素绑定事件？

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

  6. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  7. jquery 动态生成html后click事件不触发原因

    转自:http://www.iam3y.com/html/560.html 最近在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<spa ...

  8. jquery动态添加元素无法触发绑定事件的解决方案。

    jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●｀∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...

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

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

随机推荐

  1. 启动loadrunner 11的controller提示试图执行系统不支持的操作(已解决)

    启动loadrunner 11的controller提示试图执行系统不支持的操作 分类: loadrunner 2014-05-12 17:33 532人阅读 评论(0) 收藏 举报 win7旗舰版3 ...

  2. Fiddler-抓取安卓手机APP请求地址

    第一步:下载神器Fiddler,下载链接: http://fiddler2.com/get-fiddler 下载完成之后,傻瓜式的安装一下了! 第二步:设置Fiddler打开Fiddler,     ...

  3. Mac系统使用命令行快捷打开Sublime

    本篇文章由:http://xinpure.com/use-command-line-shortcuts-to-open-the-mac-system-sublime/ 方法一 使用软链接 ln -s ...

  4. Linux-Vim常用操作

    vim wangyunpeng.txt 创建一个wangyunpeng.txt文件 输入"i"进入插入模式 显示行号,需要在命令模式下输入":se nu" cp ...

  5. 匿名类型 使用泛型T linq返回dynamic类型的匿名实体 如何把匿名类型.GetType()返回的对象传进泛型里面 EF实体查询出的数据List<T>转DataTable出现【DataSet 不支持 System.Nullable<>】的问题

    [100分]紧急求助:LinQ下使用IQueryable<T>如何将返回类型<T>使用匿名类型 问题描述如下:我有一个方法如下:public IQueryable Dissen ...

  6. 阻塞IO、非阻塞IO的区别

    1.类与类之间的关系:依赖,实现,泛化(继承),关联,组合,聚合. 1)依赖(虚线):一个类是 另一个类的函数参数 或者 函数返回值. 2)实现(实线加小圆):对纯虚函数类(抽象类)的实现. 3)继承 ...

  7. Fiddler设置代理抓手机包

    启动Fiddler,打开菜单栏中的 Tools > Fiddler Options,打开“Fiddler Options”对话框. 在Fiddler Options”对话框切换到“Connect ...

  8. memcache基础知识-stats参数

    安装memcache: #tar -xvf libevent-1.4.13-stable.tar.gz#cd libevent-1.4.13-stable#./configure && ...

  9. 匿名内部类 , Iterable<T> 和 Iterator<T>

    package generic; import java.util.ArrayList; import java.util.Arrays; import java.util.Collection; i ...

  10. linux上定时备份mysql数据库

    定时备份数据库 /usr/sbin/backupmysql timestamp=`date +"%Y-%m-%d-%H-%M-%S"` mysqldump -uroot -p'12 ...