1. 使用 on()方法   

    本质上使用了事件委派，将事件委派在父元素身上

    自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品，但是由于on()方法必须有事件，没有事件时可选择delegate()；

    下例为选项卡：

 父元素： .main .left 
 子元素：  li
$("父元素").on("click","子元素",function(){
    var index=$(this).index();
    $(".main .right").find('li').css({"background":"#F4F4F4","color":"#333"});
    $(this).css({"background":"#fff","color":"#46c6ff"});
    $(".main .left").find('li').hide();
    $(".main .left").find('li').eq(index).show();
});

2. on()可以获取动态元素，必须有事件

   delegate() 可以获取动态元素，可以没事件

   live() 可以获取动态元素，jQuery 1.9已弃用，必须有事件

   bind() 只能获取静态元素，不能获取动态元素，必须有事件

    

一、问题描述

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

二、解决方法

　　度娘推荐的方法基本是用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如何获取动态添加的元素的更多相关文章

  1. jQuery获取动态添加的元素，live和on的区别

    今天给大家说一下如果用jQuery获取动态添加的元素,通常如果你在网页上利用jQuery添加一个元素,那么用平常的jQuery获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在 ...

  2. JQuery无法获取动态添加的图片宽度问题解决办法

    $('.imgUl li,.v_img').click(function(){ var _left = 0; var _top = 0; $('body').append('<div class ...

  3. jQuery中给动态添加的元素绑定事件

    $(document).on(event,selector,function(){ //do somethimg here! });

  4. jquery动态添加的元素绑定的事件不生效的问题

    我们可以通过 $(document).on('click', '#xxx', callback) 这种形式解决. 原因,一般情况下,我们是通过 $('#xxx').click(callback) 这种 ...

  5. [转]jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

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

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

  7. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

  8. jQuery对 动态添加 的元素 绑定事件（on()的用法）

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  9. [转载]给Jquery动态添加的元素添加事件

    原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...

随机推荐

  1. SPI最大传输速率【转】

    转自:https://www.silabs.com/community/mcu/8-bit/knowledge-base.entry.html/2017/01/13/spi_-asc0 问题 SPI作 ...

  2. PXC加入新节点避免SST时grastate.dat文件内容的修改问题

    PXC加入新节点避免SST时grastate.dat文件内容的修改问题 在主从同步完成并关闭实例后,需要修改grastate.dat中的seqno:到底应该填已经执行过最后的XID号(Executed ...

  3. Deep Learning基础--word2vec 中的数学原理详解

    word2vec 是 Google 于 2013 年开源推出的一个用于获取 word vector 的工具包,它简单.高效,因此引起了很多人的关注.由于 word2vec 的作者 Tomas Miko ...

  4. Python递归 — — 二分查找、斐波那契数列、三级菜单

    一.二分查找 二分查找也称之为折半查找,二分查找要求线性表(存储结构)必须采用顺序存储结构,而且表中元素顺序排列. 二分查找: 1.首先,将表中间位置的元素与被查找元素比较,如果两者相等,查找结束,否 ...

  5. [How to] HBase的bulkload使用方法

    1.简介 将数据插入HBase表中的方法很多,我们可以通过TableOutputFormat以Mapreduce on HBase的方式将数据插入,也可以单纯的使用客户端API将数据插入.但是以上方法 ...

  6. UBuntu14.04 --vim安装YouCompleteMe插件

    说明 我电脑的系统参数(用 uname -a命令查看)如下: Linux avyn-Lenovo --generic #-Ubuntu SMP Tue Mar :: UTC i686 i686 i68 ...

  7. HDU 4300 Clairewd’s message(KMP+思维)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4300 题目大意:题目大意就是给以一段字符xxxxzzz前面x部分是密文z部分是明文,但是我们不知道是从 ...

  8. beego学习笔记（4）：开发文档阅读（4）

    beego.Run() 这个运行后, 1)解析配置文件,也就是conf目录下的. 2)判断是否开启session,并作相应的工作 3)执行用户的hookfunc. 4)是否编译模板 5)是否开启文档功 ...

  9. beego学习笔记（4）：开发文档阅读（1）

    1.beego的设计是高度模块化的.每个模块,都可以单独使用.一共八大模块: cache;session;log;orm;context;httplibs;toolbox 2.beego的执行逻辑 3 ...

  10. csu 1114平方根大搜索(JAVA大小数+二分)

    1114: 平方根大搜索 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 182  Solved: 96[Submit][Status][Web Boar ...