文档章节

jQuery中的on方法

我叫leo-
 我叫leo-
发布于 2016/03/28 11:53
字数 735
阅读 7
收藏 0

1. on 给已经在dom 中的元素绑定事件

jQuery的文档里面已经给出示例了,先看看on方法的完整的形态:

on(events,[selector],[data],fn) 
参数:events,[selector],[data],fn)* 
events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin” 。 
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它> 到达选定的元素,事件总是触发。 
data:当一个事件被触发时要传递event.data给事件处理函数。 
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

在jQuery的文档中的示例:

function myHandler(event) {
    alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)1234

这个示例基本可以说明on方法的使用,但是示例并没有涉及到第二个参数selector,而第二个有一个非常好用的特点就是这里第二点 给动态添加的元素绑定事件

2. on 给动态添加的元素绑定事件

其实,on方法里面,第二个参数selector 才是真实作为触发事件的对象,在参数的解释中就有说明。 
而jQuery在绑定事件的时候,$(selector1).on() 的时候,如果selector1 的元素还没有加载到dom中的时候,这段代码就会被忽略不执行,事件就不会绑定。这也就是说,如果我们省略on参数的selector的时候,时间是绑定要selector1上面。如果selector1的元素不存在,绑定事件就失败了。

也正是这样一个selector 参数,可是帮助我们实现为动态加载元素绑定事件。如上,我们知道真正触发事件的selector,事件绑定代码需要selector1存在,那就好办。我们找一个dom 中已经存在的元素,例如:document,我们要绑定的元素必然是这个的子元素,假如我们给 .testBtn (js动态加入的元素)绑定click事件,带入如下:

    $(document).on('click','.testBtn',function(){
        console.log('button clicked ...');
    })123

这样就可以实现了。

3. 值得注意的地方

这里之前关于on还有一篇文章 http://blog.csdn.net/fun913510024/article/details/46971681 
这篇文章中提到了如果多次对一个元素绑定事件,事件会触发多次,需要off 解除。(另外,那篇文章举例不太好,要实现目的,应该采用这里说的方法,就不会多次绑定了)。 
对那篇文章里面的例子进行测试之后发现,最后添加的按钮只执行了一次,前面添加的按钮事件执行次数一次增多,大致可以发现,on 是把这些时间放在回调队列里面的,不管事件回调的函数时候相同都会依次执行


本文转载自:http://blog.csdn.net/fun913510024/article/details/49107751#

我叫leo-
粉丝 1
博文 35
码字总数 1675
作品 0
郑州
程序员
私信 提问
dom对象和jQuery对象的区别

1.jQuery对象和DOM对象 在第一次学习Jquery的时候也许大家都不是很清楚Jquery对象和DOM对象两者之间的关系,下面就解释两点,便于对Jquery和Dom加深理解 DOM对象,即是我们用传统的方法(java...

DockOne
2014/07/30
101
0
JS对象与Dom对象与jQuery对象之间的区别

前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 分析: 其实因为$("#save")出来的其实是jQuery对象,而不是普通DOM对象 解......

苦水润喉
2018/08/16
0
0
jQuery对象和DOM对象之间的转换实现

本文主要向大家介绍了jQuery对象和DOM对象之间互相转换的方法,其实转换过程十分简单,一起来看看吧。 在讨论jQuery对象和DOM对象的相互交换之前,先约定好定义变量的风格。如果获取的对象是...

IanSun
2015/03/14
46
1
JQuery的点点滴滴--JQuery对象和DOM对象

一、如何区分JQuery对象和Dom对象呢? 在Javascript中通过getElementById或者getElementbyTagName来获取到的元素节点,就是DOM对象,可以使用Javascript中的方法 JQuery对象时通过JQuery包装...

长平狐
2012/11/28
102
0
DOM对象与jquery对象的区别

jQuery对象和DOM对象使用说明,需要的朋友可以参考下。 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它...

zwjjap
2015/07/23
187
0

没有更多内容

加载失败,请刷新页面

加载更多

Giraph源码分析(八)—— 统计每个SuperStep中参与计算的顶点数目

作者|白松 目的:科研中,需要分析在每次迭代过程中参与计算的顶点数目,来进一步优化系统。比如,在SSSP的compute()方法最后一行,都会把当前顶点voteToHalt,即变为InActive状态。所以每次...

数澜科技
今天
4
0
Xss过滤器(Java)

问题 最近旧的系统,遇到Xss安全问题。这个系统采用用的是spring mvc的maven工程。 解决 maven依赖配置 <properties><easapi.version>2.2.0.0</easapi.version></properties><dependenci......

亚林瓜子
今天
10
0
Navicat 快捷键

操作 结果 ctrl+q 打开查询窗口 ctrl+/ 注释sql语句 ctrl+shift +/ 解除注释 ctrl+r 运行查询窗口的sql语句 ctrl+shift+r 只运行选中的sql语句 F6 打开一个mysql命令行窗口 ctrl+l 删除一行 ...

低至一折起
今天
9
0
Set 和 Map

Set 1:基本概念 类数组对象, 内部元素唯一 let set = new Set([1, 2, 3, 2, 1]); console.log(set); // Set(3){ 1, 2, 3 } [...set]; // [1, 2, 3] 接收数组或迭代器对象 ...

凌兮洛
今天
4
0
PyTorch入门笔记一

张量 引入pytorch,生成一个随机的5x3张量 >>> from __future__ import print_function>>> import torch>>> x = torch.rand(5, 3)>>> print(x)tensor([[0.5555, 0.7301, 0.5655],......

仪山湖
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部