jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了，然而jQuery 1.9及其以上版本提供了on函数来代替。本文讲解了jQuery on函数的使用方法，以及在使用jQuery函数中遇到的一些问题。

jQuery on函数语法

1

$(selector).on(event,childSelector,data,function,map)

各个参数说明如下：

参数 描述
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。
map 规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

按照上面的语法下面的例子是可以实现的

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("p").on("click",function(){

    alert("The paragraph was clicked.");

  });

});

</script>

</head>

<body>

 

<p>Click this paragraph.</p>

 

</body>

</html>

但是如果要绑定的on方法是动态加载出来的元素，那么这样使用就是没有用的。看下面的例子：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<!DOCTYPE html>

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("#div1").click(function(){

    $("<div class='test'>test</div>").appendTo($("#div1"));

  });

  $(".test").on("click",function(){

    $(".test").css("background-color","pink");

  });

  $("#div2").bind("click",function(){

    $(this).css("background-color","pink");

  });

});

</script>

</head>

<body>

 

<h4 style="color:green;">This example demonstrates how to achieve the same effect using on() and bind().</h4>

 

<div id="div1" style="border:1px solid black;">This is some text.

<p>Click to set background color using the <b>on() method</b>.</p>

</div><br>

 

<div id="div2" style="border:1px solid black;">This is some text.

<p>Click to set background color using the <b>bind() method</b>.</p>

</div>

 

</body>

</html>

上面例子中.test元素是动态加载的，但是给它绑定click方法的时候，明明使用了

1

$(".test").css("background-color","pink");

将背景色设为pink，但是没有起作用，什么原因呢，原因就在于.test是动态加载的元素，而使用上面的方法不能绑定动态加载元素的事件，修正的方法为使用下面的代码代替：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<!DOCTYPE html>

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("#div1").click(function(){

    $("<div class='test'>test</div>").appendTo($("#div1"));

  });

  $(document).on("click",".test",function(){//修改成这样的写法

    $(".test").css("background-color","pink");

  });

  $("#div2").bind("click",function(){

    $(this).css("background-color","pink");

  });

});

</script>

</head>

<body>

 

<h4 style="color:green;">This example demonstrates how to achieve the same effect using on() and bind().</h4>

 

<div id="div1" style="border:1px solid black;">This is some text.

<p>Click to set background color using the <b>on() method</b>.</p>

</div><br>

 

<div id="div2" style="border:1px solid black;">This is some text.

<p>Click to set background color using the <b>bind() method</b>.</p>

</div>

 

</body>

</html>

究其元素就在于使用$(document)意义就在于使元素加载完后才执行方法，所以当为jQuery动态加载的元素绑定on方法的时候，使用$(document)设置代码脚本在DOM元素加载完成后开始执行。

jQuery 1.9/2.0/2.1及其以上 on 无效的解决办法的更多相关文章

  1. windows2003 IIS6.0右键属性没有asp.net选项卡的解决办法

    windows2003 IIS6.0右键属性没有asp.net选项卡的解决办法 1,如果是只安装了.net framework 1.1 在iis中是不显示那个选项卡的.默认就会支持asp.net1.1 ...

  2. 配置IIS提示打开目录浏览时的问题：未能从程序集“System.ServiceModel, Version=3.0.0.0”中加载类型“System.ServiceModel.Activation.HttpModule” 的解决办法

    错误消息: 未能从程序集“System.ServiceModel, Version=3.0.0.0”中加载类型“System.ServiceModel.Activation.HttpModule” 的 ...

  3. Server Tomcat v7.0 Server at localhost failed to start.临时解决办法

    错误名:Server Tomcat v7.0 Server at localhost failed to start. 解决办法:去掉下面这句话: (通常在代码开头部分,public class前) ...

  4. （转）ThinkPHP3.0 使用分组后路径访问无效的解决方法!

    注意,清除Runtime,就是清除缓存,很重要,妹的,调试了一下午,总是加上Home目录分组就找不到页面,直接放到action下就行,原来是缓存搞得鬼,另外要在入口文件开启‘APP_DEBUG’ 在T ...

  5. jQuery的AJAX方法简介及与其他文件$符号冲突的解决办法

    一.重要的jQuery AJAX方法简介 $.load(url) 从服务器载入数据 $.get(url,callback) 从服务器请求数据,并执行回调函数 $.post(url,data,callb ...

  6. Mybatis中 Integer 值为0时，默认为空字符串的解决办法。

    需求是查询级别为0的用户 User对象里的level字段的值为0,查询时居然没有查到为level为0的用户. <select id="selectSelective" par ...

  7. 关于Server Tomcat v8.0 Server at localhost failed to start的解决办法

    测试环境: Eclipse Java EE IDE for Web Developers. Version: Luna Service Release 1 (4.4.1)Build id: 20140 ...

  8. Microsoft Visual C++ 9.0 is required Unable to find vcvarsall.bat 解决办法

    问题描述 安装 Python的MySQL驱动时时出现这个错误: Microsoft Visual C++ 9.0 is required Unable to find vcvarsall.bat 环境 ...

  9. MongoVUE(1.6.9.0)登录提示：Connection was refused的解决办法

    日志文件上描述: UserNotFound Could not find user admin1@diva 2015-10-13T12:12:22.208+0800 I NETWORK [conn1] ...

随机推荐

  1. C#全局键盘监听（Hook）

    一.为什么需要全局键盘监听? 在某些情况下应用程序需要实现快捷键执行特定功能,例如大家熟知的QQ截图功能Ctrl+Alt+A快捷键,只要QQ程序在运行(无论是拥有焦点还是处于后台运行状态),都可以按下 ...

  2. abp + angular $http + webapi 服务

    什么是angular $http服务 http是angularjs的一个核心服务,用于读取远程服务器的数据,也就是封装了浏览器原生的xhtmlrequest对象,可以直接同外部进行通信. 怎样使用an ...

  3. pageadmin CMS网站建设教程：模板中如何实现信息数据共享

    pageadmin CMS网站制作教程:模板中如何实现信息数据共享 很多时候信息数据需要共享,一个最常用的应用场景就是手机版(独立手机,非响应式)本共享pc版本数据,下面以这个场景为例讲解. 假设手机 ...

  4. 面试题-一个列表向右移动k位

    def sort(lst,k): length = len(lst) left =lst[:-k] right =lst[-k:] lst.clear() lst.extend(right) lst. ...

  5. Day 1. 占位符的使用方法（%d，%s）（格式化输出）

    方法1  name = input("请输入名字1") age = input ("请输入年龄") hobby = input("请输入兴趣爱好&qu ...

  6. java 附件上传、下载前后端代码

    前言:业务需要:附件上传,需要同时满足浏览器上传,和APP上传附件,并且浏览器端不可使用form表单提交,因为表单提交无法直接获取返回值,除非刷新页面才可显示上传的附件.所以此处使用ajaxfileu ...

  7. Android与js交互

    本文转载自:http://blog.csdn.net/it1039871366/article/details/46372207 一文. Android 中可以通过webview来实现和js的交互,在 ...

  8. Django安装(第一个项目)

    day60 从系统中选择已存在的解释器. 新建Django项目         命令行创建:             django-admin startproject mysite          ...

  9. FunDA（14）－ 示范：并行运算，并行数据库读取 - parallel data loading

    FunDA的并行数据库读取功能是指在多个线程中同时对多个独立的数据源进行读取.这些独立的数据源可以是在不同服务器上的数据库表,又或者把一个数据库表分成几个独立部分形成的独立数据源.当然,并行读取的最终 ...

  10. sql盲注之报错注入(附自动化脚本)

    作者:__LSA__ 0x00 概述 渗透的时候总会首先测试注入,sql注入可以说是web漏洞界的Boss了,稳居owasp第一位,普通的直接回显数据的注入现在几乎绝迹了,绝大多数都是盲注了,此文是盲 ...