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. anychat安装

    1.下载后,解压到一个目录 2.进入anychat核心服务器目录,并启动   ①.cd %anychat安装路径%/binrver     ②../anychatcoreserver -d   3.进 ...

  2. openssh升级步骤

    1下载openssh最新版本 2 configure ./configure --prefix= /ssh先配置一下 再在本地安装. make &makeinstall 3 按照/ssh包含内 ...

  3. STL中stack/queue/map以及Boost unordered_map 的使用方法

    一.stackstack 模板类的定义在<stack>头文件中.stack 模板类需要两个模板参数,一个是元素类型,一个容器类型,但只有元素类型是必要的,在不指定容器类型时,默认的容器类型 ...

  4. angular.js 验证码注册登录

    css部分 header{ height: 50px; line-height: 50px; display: flex; } .callback{ text-align: left; display ...

  5. 使用亚马逊云服务器EC2做深度学习（三）配置TensorFlow

    这是<使用亚马逊云服务器EC2做深度学习>系列的第三篇文章. (一)申请竞价实例  (二)配置Jupyter Notebook服务器  (三)配置TensorFlow  (四)配置好的系统 ...

  6. Python2中input()、raw_input()和Python3中input()

    听了ALEX的某节课,说input()和raw_input()函数在Python2中没有区别,现在来探讨一下Python2中的input().raw_input()函数和Pyhont3中的input( ...

  7. Templated Helper Methods(二)

      1.Label and Display Elements   2.Whole-Model Templated Helpers     3.Using Metadata to Control Edi ...

  8. Tarojs+redux支付宝小程序开发攻略

    技术选型 对于习惯react语法的开发者来讲,RN是实现native的必备工具. 我们甚至可以屏蔽官方稳定而强大的配置层,直接上手开发. 而后,同为表层React语法的Rax.Taro这样的开源多端开 ...

  9. eclipse 创建 maven 项目时如何修改 web 的版本和 jdk 的版本

    eclipse 创建 maven 项目时如何修改 web 的版本和 jdk 的版本 在使用 eclipse 创建 maven 项目的时候,默认的 web.xml 的版本时 2.3,默认 jre 的版本 ...

  10. 【SQL SERVER】T-SQL 字符串前加 N 是什么意思

    比如 select @status = N'stopped' 那么其中的字符串 stopped 前面为什么要加 N 呢?而且我们发现有些地方加 N 与否都没有影响,有些地方又必须加 N. N 在这里表 ...