今天工作中需要在页面动态生成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. 带 IK 分词器的 Luke 和 搜索应用服务器solr

    首先在网上查了一下: Solr Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索 ...

  2. 阿里云视频服务SDK

    原文地址:https://help.aliyun.com/document_detail/51992.html?spm=5176.doc52200.6.668.Sn3AjC SDK下载 更新时间:20 ...

  3. 中小型研发团队架构实践：任务调度Job

    一.Job 简介 Job 类似于数据库中的作业,多用于实现定时执行任务.适用场景主要包括定时轮询数据库同步.定时处理数据.定时邮件通知等. 我们的 Job 分为操作系统级别定时任务 WinJob 和 ...

  4. python selenium ---键盘事件

    转自:http://www.cnblogs.com/fnng/p/3258946.html 本节重点: l 键盘按键用法 l 键盘组合键用法 l send_keys() 输入中文运行报错问题 键盘按键 ...

  5. Josephus排列

    思考与分析: 对于m为常数,能够用循环链表,用head,tail标志头尾指针使其易于表示循环结构.循环输出后删除结点n次,每次外层循环时.内层都固定循环m次.所以执行时间为O(mn)=O(n). 对于 ...

  6. 在Windows8系统下exe格式会计课件下载播放帮助图解

    近期非常多会计从业人员都開始购买课件,開始学习,准备考试:可是网校的课件有些是EXE扩展名格式的,在Windows8系统下播放比較困难.方法比較曲折,这里用图说话,给大家一点參考,希望对大家实用. 下 ...

  7. MSBuild入门（续）

    MSBuild基本概念(续) 在上一篇简单的介绍了下MSBuild中的四个基本块,每块介绍比较单薄,在这里对在大多数的项目模版生成的*.*proj文件中比较常见一些用法和概念做些补充.主要有一下几方面 ...

  8. 点滴积累【other】---存储过程修改表的所有字段（sql）

    USE [QG_Mis24] GO /****** Object: StoredProcedure [dbo].[p_set] Script Date: 07/11/2013 17:05:38 *** ...

  9. Atitit.进程管理常用api

    Atitit.进程管理常用api 1 常用api 进程列表 getProcessList 是否存在某个进程判断 isExistProcess 启动进程run Sleep Exit Shutdown 作 ...

  10. 如何改变iframe滚动条的样式？

    如何改变iframe滚动条的样式? web前端开发 css javascript iframe html RayLiao 2014年11月19日提问 · 2014年11月20日更新 关注 关注 收藏 ...