今天工作中需要在页面动态生成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. ASP.Net MVC3/4中Model验证错误信息的本地化

    最近使用ASP.Net MVC4做一个B/S的管理系统,里面有N多的Action和View Model,View Model上又有N多的验证. 一开始写的时候虽然知道要实现多语言,但是没有过多考虑,本 ...

  2. MAC－Zsh安装与使用——终极Shell

    前言:Zsh可配置性强,用户可以自定义配置,个性化强.Zsh tab补全更强大,该功能可以让我们节约很多时间.Zsh 还有代码高亮功能,使得代码更好看了,显得逼格更高.Zsh 还有很多强大的功能,这里 ...

  3. 使用 WinEdt 来写中文文章or 建模论文

    找了几乎两个小时…… 后来发现… WinEdt 是可以用来写中文文章的…而并非只能英文文章或演示文稿… \documentclass{article} \usepackage{CJK} \begin{ ...

  4. 表格行与行的间距设置，通过margin无效，要这么设置

    CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框 值 描述 separate 默认值.边框会被分开.不会忽略 border-spacing 和 empty-cell ...

  5. 中小型研发团队架构实践：Redis快速入门及应用

    Redis的使用难吗?不难,Redis用好容易吗?不容易.Redis的使用虽然不难,但与业务结合的应用场景特别多.特别紧,用好并不容易.我们希望通过一篇文章及Demo,即可轻松.快速入门并学会应用. ...

  6. Docker 私有仓库最简便的搭建方法

    http://blog.csdn.net/wangtaoking1/article/details/44180901/ Docker学习笔记 — Docker私有仓库搭建http://www.jian ...

  7. [转]鼠标和键盘模拟API

    几乎所有的游戏中都使用了鼠标来改变角色的位置和方向,玩家仅用一个小小的鼠标,就可以使角色畅游天下. 那么,我们如何实现在没有玩家的参与下角色也可以自动行走呢.其实实现这个并不难,仅仅几个Windows ...

  8. [转]手工释放linux内存——/proc/sys/vm/drop_caches

    另一篇:http://www.linuxfly.org/post/320/   1.清理前内存使用情况 free -m 2.开始清理  echo 1 > /proc/sys/vm/drop_ca ...

  9. CCNA2.0笔记_WAN技术-帧中继

    帧中继   -使用虚电路进行连接: -提供面向对象的服务 -帧中继 PVC 由 DLCI 标识,PVC 的状态通过 LMI 协议报告 Frame Relay NBMA连接引起的路由协议问题:  -水平 ...

  10. Aspose.Cells 导出指定格式项目（金额、数字、文本）

    Aspose.Cells为开发人员提供了许多内嵌的数字和日期格式,开发人员可以通过Style对象的Number属性调用这些内嵌格式,下面是Aspose.Cells提供的显示格式:Value Type ...