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. php直接输出json格式

    php直接输出json格式,很多新手有一个误区,以为用echo json_encode($data);这样就是输出json数据了,没错这样输出文本是json格式文本而不是json数据,正确的写法是应该 ...

  2. mysql 操作时间戳

    1.将long显示成时间 SELECT FROM_UNIXTIME(1249488000, '%Y%m%d' ) 2.日期格式化成时间戳 SELECT UNIX_TIMESTAMP('2016-05- ...

  3. 简单优化：Zipalign

    Android SDK中包含一个“zipalign”的工具,它能够对打包的应用程序进行优化.在你的应用程序上运行zipalign,使得在运行时Android与应用程序间的交互更加有效率.因此,这种方式 ...

  4. CSS3绘图与动画

    <meta http-equiv="X-UA-Compatible" content="ie=edge">  1.CSS3-2D转换属性:trans ...

  5. C#矩形框沿直线移动

    C#中用GDT+的一系列方式,可以绘制各种图形:点,直线,圆形,矩形...... C#中这些图形的绘制,一般教程的demo中给出的代码,是在Form1_Paint(object sender, Pai ...

  6. 删除WP提示：自动升级WordPress失败

    wordpress后台总有烦人的升级失败的提示,查了半天找不到怎么去掉:“自动升级WordPress失败--请再试一次”这个提示的方法,特意分享出来 方法/步骤   1 打开wordpress根目录找 ...

  7. 在go中连接mysql

    5.访问数据库 5.1 database/sql接口 5.2 使用MySQL数据库 5.3 使用SQLite数据库 5.4 使用PostgreSQL数据库 5.5 使用Beego orm库进行ORM开 ...

  8. 【PAT】1006. 换个格式输出整数 (15)

    1006. 换个格式输出整数 (15) 让我们用字母B来表示“百”.字母S表示“十”,用“12...n”来表示个位数字n(<10),换个格式来输出任一个不超过3位的正整数.例如234应该被输出为 ...

  9. 安装matplotlib 和Pygal

    一.  在Linux系统中安装matplotlib 如果我们使用的是系统自带的Python版本,可使用系统的包管理器来安装matplotlib,为此只需执行一行命令: $ sudo apt-get i ...

  10. python开发学习-day02(元组、字符串、列表、字典深入)

    s12-20160109-day02 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...