为什么要用on()而不直接使用click
为什么要用on()而不直接使用click
http://stackoverflow.com/questions/10082031/why-use-jquery-on-instead-of-click
http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on
有两个好处 使用on()可以为动态生成的元素绑定事件
其次 使用on可以只为父元素绑定事件 不需要为子元素都一个一个的绑定
首先需要明白 并不是说动态生成的元素就一定不能用.click的方式来绑定事件
(否则逻辑上说不通 对吧)
在使用$('.xxx').click的时候 只要$('.xxx')可以得到元素 就可以绑定
只是你需要特别注意执行顺序 使用$('.xxx') 之前 .xxx这个元素已经在DOM中
是不是使用 $('.xxx').on 就可以不用注意呢?也不是 要不然$('.xxx')的到的是undefined怎么可能绑定事件呢
这样子写两者是完全等价的
$(".close-box").click( function() {
MoneyBox.closeBox();
return false;
});
$(".close-box").on("click", function () {
MoneyBox.closeBox();
return false;
});
那应该如何用on()呢?
$('#container').on('click', '.elementClass', function() {
});
其中 #container 是 .elementClass的前辈 且最好保证是静态的元素,否则还是要注意绑定的时机...
这样在click #container中的.elementClass元素就可以执行对应的处理了\
想要取消事件? 使用off()
http://www.andismith.com/blog/2011/11/on-and-off/
==============这是之前写的===================
都说on是用于动态添加的元素的事件。但是你不觉得奇怪嘛,难道动态添加的元素就不能用普通的事件绑定,这样说不通啊!
其实是on可以在元素添加到dom之前绑定,而对于普通绑定,只要元素已经出现在了dom中,不论是否动态添加 事件当然也是生效的

$('body').on('click', '.d1', function(event) {
//event.preventDefault();
console.log('on0');//ok
});
console.log($('.d1'));
$('.d1').on('click', function(event) {
console.log('on1'); //not working becasuse $('.d1') is undefined
});
$('.d1').click(function(event) {
/* Act on the event */
console.log('click0');// not working same reason as before
});
var dq=$('<div class="d1"></div>');
$('body').append(dq);
$('.d1').click(function(event) {
/* Act on the event */
console.log('click');
});

可以看到 对于on 绑定也是有要求的,如果on的左边的对象不存在 当然绑定也是不行的。
on左边应该是一个已经存在的父元素,待绑定click对象是d1 这样就是在元素添加到DOM之前指定了事件处理
为什么要用on()而不直接使用click的更多相关文章
- zepto的touch模块解决click延迟300ms问题以及点透问题的详解
大家都知道移动端的click事件会延迟300ms触发,这时大家可以使用zepto的touch模块,里面定义了一个tap事件,通过绑定tap事件,可以实现点击立即触发的功能. 那么,它的tap事件是怎么 ...
- click与on的区别
click只能用于html在注册事件之后没有变化的:on用于html在注册事件后,还会通过JS脚本添加一些按钮,并者希望这些按钮也会有之前注册事件的按钮同样的事件话,就需要用on去为按钮的父节点去注册 ...
- 移动Web触控事件总结
移动web风风火火几多年,让我这个在Pc端漂流的前端er不免心生仰慕,的确入行几多年,也该是时候进军移动web了.移动web中踩到的第一个坑就是事件问题,所以在吸取众大神的经验后,特作总结以示后来者. ...
- Element.Event
addEvent(type,fn):为DOM元素增加一个事件监听器 removeEvent(type,fn):移除先前为DOM元素添加的事件监听器 eg: var destroy = function ...
- 移动端300ms点击事件的延迟
移动端click事件300ms延迟 移动端click事件300ms的延迟在目前看来,已经是老生常谈了. 以下内容,我会在参考资源的基础上谈谈我对移动端click事件300ms延迟的一些理解.本人愚昧, ...
- HTML和CSS使用注意事项
HTML 1.button标签 在IE中,button标签默认的type是button,而在其他浏览器和W3C标准中button默认的属性都是submit. 所以,在一个form表单中,如果butto ...
- 2017-11-20 中文代码示例之Vuejs入门教程(一)问题后续
"中文编程"知乎专栏原文 第一个issue: Error compiling template if using unicode naming as v-for alias · I ...
- react.js学习之路四
针对学习react.js中,我感觉最大的疑惑点就是bind(this)的绑定和指向问题了,我被这个问题弄的头昏,有时候调用组件的时候,直接显示undefined,不存在这个组件,当时的心情是崩溃的,整 ...
- Web前端——JavaScript扩展补充
JS补充 document也是windows的一个子对象 a标签点击事件 要想设置点击a标签,执行某种方法,推荐在a标签的herf属性使用JavaScript伪协议,实现点击之后执行的js方法,而不是 ...
随机推荐
- k8s之scheduler
一.概述 调度器是kubernetes中独特而又重要的一个模块,独特是因为scheduler是唯一一个以plugin形式存在的组件,重要是因为kubernetes中最重要的基础单元pod的部署是通过s ...
- stl之map 排序
排序问题,STL中默认是采用小于号来排序的,因为设置int等类型做key,它本身支持小于号运算,在一些特殊情况,比如关键字是一个结构体,涉及到排序就会出现问题,因为它没有小于号操作,insert等函数 ...
- java中解决request中文乱码问题
request乱码问题(当我们提交的数据中含有中文信息时),分两种情况: 通过post方式提交数据给Servlet Servlet服务端部分代码: public void doPost(httpSer ...
- SQL Server 数据库DML触发器 【一】
今天学习SQL Server数据库中DML触发器(DDL触发器以后有时间继续学习). 当删除一条创建有触发器的表中的内容时,触发器执行SQL语句. 1.首相先创建一张表,表名称是 [Test] , 内 ...
- java 笔试
单例设计模式: public class Singliton { //no new private Singliton (){ } static Singliton ins = null; publi ...
- IO库 8.1
题目:编写函数,接受一个istream&参数,返回值类型也是istream&.此函数须从给定流中读取数据,直到遇到文件结束标志时停止.它将读取的数据打印在标准输出上.完成这些操作后,在 ...
- 在zendstudio上配置SVN
本文介绍zendstudio结合SVN的使用方法. 一.部署svn服务器 直接安装用svn软件,配置太过麻烦,用户和版本库.权限管理不太方便.推荐使用CollabNetSubversionEdge.以 ...
- day3_python学习笔记_chapter5_数字
1. 整形的表示范围-2^32~2^32 - 1 : 长整形表示:aLong = 99999L 2. 复数的属性, num.real,该复数的实部, num.imag,该复数的虚部.num.conju ...
- <转>四个重要属性——Action、Data、Category、Extras
Intent作为联系各Activity之间的纽带,其作用并不仅仅只限于简单的数据传递.通过其自带的属性,其实可以方便的完成很多较为复杂的操作.例如直接调用拨号功能.直接自动调用合适的程序打开不同类型的 ...
- kafka初探
http://www.infoq.com/cn/articles/kafka-analysis-part-1