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. dorado-menu

    1.menu控件是一个下拉菜单控件,可以设置数icon(图标),click事件,Dorado事件中都有self和arg两个参数,其中self是当前控件本身 2.menu控件可以和toolBar结合使用 ...

  2. .net core cache使用

    整理下.net core cache的使用 Nuget安装   Microsoft.Extensions.Caching.Memory using Microsoft.Extensions.Cachi ...

  3. Win(Phone)10开发第(3)弹，简单的Demo程序网络请求json解析列表显示

    先分享一个由Json字符串直接生成解析对应的类的工具: jsonclassgenerator14 百度天气接口 下面是由一个小功能(又特么的是天气)的实现,记录下下UAP的流程和结构(其实跟之前一模一 ...

  4. log4net 未生成log 原因分析

    本文假定你对log4net的配置以及在代码中的使用都非常熟悉,但就是没有按预想的生成log文件,正当你抓耳挠腮之时,那以下原因很可能是你解决问题的办法: 1.log4net.dll是否生成到程序运行目 ...

  5. django 使用其自带的验证系统 进行用户名有效性验证 登录状态验证 登入操作 登出操作

    from django.shortcuts import render, redirect from django.contrib.auth import authenticate, login, l ...

  6. 三，PHP缓存机制实现页面静态化

    页面静态化思路: 因为新闻这种信息对实时性要求不高,并且比较稳定,所以可以这样做:当地一个用户访问某条新闻后,我们使用ob缓存机制,将内容缓存到html页面.当下一次访问时候,直接访问html页面.这 ...

  7. centOS7 下安装smb服务器

    转载自:http://www.cnblogs.com/lgh344902118/p/7503620.html centOS7和windows10 samba是一款可以让linux和windows下共享 ...

  8. hexo安装总结

    博客原文地址:Claiyre的个人博客 如需转载,请在文章开头注明原文地址 hexo真心是一个不错的东西呢,安装简单(然而对博主来说并不是这样,伤心脸),主题样式简洁优雅,还有多种选择. 流程如下 安 ...

  9. SQL 必知必会 总结（一）

    SQL必知必会 总结(一) 第 1 课 了解SQL 1.数据库(database): 保存有组织的数据容器(通常是一个文件或一组文件). 2.数据库管理系统(DBMS): 数据库软件,数据库是通过 D ...

  10. 五：MyBatis学习总结(五)——实现关联表查询

    一.一对一关联 1.1.提出需求 根据班级id查询班级信息(带老师的信息) 1.2.创建表和数据 创建一张教师表和班级表,这里我们假设一个老师只负责教一个班,那么老师和班级之间的关系就是一种一对一的关 ...