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. bash基本命令速查表

    来源:https://github.com/skywind3000/awesome-cheatsheets/blob/master/languages/bash.sh ################ ...

  2. BitAdminCore框架应用篇：（一）使用Cookiecutter创建应用项目

      框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/cookiecutter-bitadmin-core 一.简介 1.Coo ...

  3. .net Aspose.pdf 转html 去除版权

    时光偷走的,永远都是我们眼皮底下看不见的珍贵. 1. 资源文件 a)     Aspose.pdf.18.12.0.nupkg  链接:https://pan.baidu.com/s/171_OWOf ...

  4. laravel5的Bcrypt加密方式对系统保存密码的小结

    laravel5文档介绍 //对 A 密码使用Bcrypt 加密 $password = Hash::make('secret'); //你也可直接使用 bcrypt 的 function $pass ...

  5. 如何在Qt资源文件中包含和释放exe等各种类型文件？

    操作系统:Windows 10 X64 企业版 Qt: 5.8.0 QtCreater: 4.2.1 刚刚开始学习Qt,不断遇到困难和挑战,前几天在各个QQ群里询问如何在Qt的资源文件中包含和释放ex ...

  6. Apache Tomcat远程命令执行漏洞(CVE-2017-12615) 漏洞利用到入侵检测

    本文作者:i春秋作家——Anythin9 1.漏洞简介 当 Tomcat运行在Windows操作系统时,且启用了HTTP PUT请求方法(例如,将 readonly 初始化参数由默认值设置为 fals ...

  7. 网站引入外部js

    有时想看某个网站下一些数据,需要用到js做一个实时的筛选,却又苦于该网站没用jQuery导致想使用jQuery时,还无法下手,那么下面这段js或许可以帮助你.1.打开我们的chrome调试工具,切换到 ...

  8. HTML+Javascript制作拼图小游戏详解（二）

    上一篇我们说了网页的基本布局.接下来将为大家带来具体的实现方法. 拼图通表格来实现,做一个方形的表格,改变其大小使之如图所示. 试想一下如果我们将一张图片剪成6张分别放入对应位置,然后再把它打乱,这样 ...

  9. Python小白学习之路（十二）—【前向引用】【风湿理论】

    前向引用 风湿理论(函数即变量) 理论总是很抽象,我个人理解: 代码从上到下执行,一旦遇到定义的函数体,内存便为其开辟空间,并用该函数的名字作为一个标识但是该函数体内具体是什么内容,这个时候并不着急去 ...

  10. node 本地静态服务器

    直接上代码 const connect = require("connect"); const serveStatic = require("serve-static&q ...