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. 访问公网WebService服务

    接下来,我们演示如何访问公网webservice服务. 我们以访问 http://www.webxml.com.cn/zh_cn/index.aspx 为例,主要演示手机号码归属地查询服务(使用说明书 ...

  2. freemarker模板引擎的使用

    freemarker是一套前端模板引擎,在使用时,要先在web项目中添加freemarker.jar的依赖. 我在这里主要演示spring-mvc整合freemarker模板引擎.项目案例的文件包结构 ...

  3. CentOS系统yum源配置修改、yum安装软件包源码包出错解决办法apt.sw.be couldn't connect to host

    yum安装包时报错: Could not retrieve mirrorlist http://mirrorlist.repoforge.org/el6/mirrors-rpmforge error  ...

  4. plsql实例精讲部分笔记

    转换sql: create or replace view v_sale(year,month1,month2,month3,month4,month5,month6,month7,month8,mo ...

  5. 完全禁用Wordpress的升级功能

    wordpress自己带有一个自动升级的功能,也就是说,如果wp检测到官方已经有新的升级可用的话他就会自己升级上去.这可能对于某些场合是个不错的功能,但是对于一些已经对系统大量魔改或者对插件稳定性不抱 ...

  6. Java虚拟机四：垃圾回收算法与垃圾收集器

    在Java运行时的几个数据区域中,程序计数器,虚拟机栈,本地方法栈3个区域随着线程而生,随线程而灭,因此这几个区域的内存分配和回收具有确定性,不需要过多考虑垃圾回收问题,因为方法结束或者线程结束时,内 ...

  7. js正则获取url参数，包含hash[#]和search[?]两种通用

    function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...

  8. phpstorm+xdebug远程调试设置

    1 xdebug扩展安装 1.1 xdebug扩展安装: 2 服务器PHP配置 3 phpstorm设置 3.1 添加远程debug 3.2 phpstorm设置: 4 浏览器插件安装 4.1 chr ...

  9. 【fastadmin】 _id 功能失效解决办法

    在add.html模版中修改对应的input标签的各种属性

  10. NOIP2013 D1 T2火柴排队

    题目描述 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各自排成一列, 同一列火柴的高度互不相同, 两列火柴之间的距离定义为: ∑(ai-bi)^2 其中 ai 表示 ...