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. Miniprofiler在swagger、vue、angular中的使用

     本篇分为以下几个部分: 1.Swagger的简单应用 2.Miniprofier的后台配置 3.跨域配置 4.在angular中显示Miniprofier 5.在vue中显示Miniprofier ...

  2. [ASP.NET]JQuery直接调用asp.net后台WebMethod方法

    在项目开发碰到此类需求,特此记录下经项目验证的方法总结. 利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod] 命名空间 1.无参数的方法调用 注意:方 ...

  3. .netcore与vue的学习笔记001

    1.dnc的js引用 需要引用的js文件要放在解决方案下的wwwroot目录下.否则将无法获取到指定js文件,出现404错误 2.vue的相关运用 0)通过new Vue并传入object来实例化一个 ...

  4. Java 类型转换工具类(持续更新)

    简介 将项目中用到的类型转换做个记录. 详细代码 @Component public class TypeUtil { // [start]字符串转各种格式 // 字符串转日期(格式:"yy ...

  5. C# 对象引擎，以路径形式访问对象属性(data.Product[1].Name)

    对象引擎,以路径形式访问对象属性,例data.Product[1].Name. 在做excel模板引擎的时候,为了能方便的调用对象属性,找了一些模板引擎,不是太大就是不太适用于excel, 因为exc ...

  6. eclipse创建Maven工程没有Maven Dependencies

    记一次eclipse创建Maven工程没有Maven Dependencies的坑 Eclipse版本:luna版 maven用的3.5.0 配置本文不提. 这辆天用Eclipse创建maven工程 ...

  7. c# 求第30位数的值

    1,1,2,3,5,8,13,21,34,55.... 求第30位数的值: 递归方法: class Program { static void Main(string[] args) { //找规律: ...

  8. Day 30 面向对象的考试题

    -摘自张磊同学博客. 面向对象 1.请简述类.对象.实例化.实例这些名词的含义: #类 : 是对具有相同属性和相似行为的一类事物的抽象 #对象: 是一个具有具体属性值的类的实例化 #实例化 : 从一个 ...

  9. 盘点Xcode中开发者最喜爱的十大开源插件

    Xcode IDE拥有着诸如导航.重构.校准等众多非常高大上的工具,而予以辅助的插件更是在Xcode的基础上对相关功能进行改进与扩展.在应用开发过程中,通过开源包管理器Alcatraz对插件进行安装管 ...

  10. python的super用法及含义

    注释:以下都是在python2.7版本验证的 总括:1.python解决二义性问题,经历了深度优先算法.广度优先算法.拓扑排序算法,目前python的版本都是使用拓扑算法(C3)    2.严谨sup ...