为什么要用on()而不直接使用click
2014-07-21 11:08
316 查看
为什么要用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中,不论是否动态添加 事件当然也是生效的
可以看到 对于on 绑定也是有要求的,如果on的左边的对象不存在 当然绑定也是不行的。
on左边应该是一个已经存在的父元素,待绑定click对象是d1 这样就是在元素添加到DOM之前指定了事件处理
有两个好处 使用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之前指定了事件处理
相关文章推荐
- 为什么要用sizeof(int),而不直接使用2?
- onclick ,onserverclick ,onclientclick 的使用 ^_^
- request和response对象(疑问:为什么servlet和jsp中可以直接使用req和res对象?如何理解内置的含义?)
- 为什么ListView.setOnItemClickListener、setOnCreateContextMenuListener会无效为什么ListView.setOnItemClickListen
- 为什么ListView.setOnItemClickListener、setOnCreateContextMenuListener会无效为什么ListView.setOnItemClickListen
- 为什么不直接使用成员变量而使用属性呢?
- 在ListView的item项里使用CheckBox或者Button时,OnItemClickListener无响应的问题
- 为什么还需要邮件服务器 直接使用企业邮箱不使用邮件服务器是否可以
- ListView.setOnItemClickListener、setOnCreateContextMenuListener无效 为什么
- ASP.NET:.net中为什么有的按钮用onserverclick而有的按钮用onclick呢?
- jsp内置对象为什么可以直接使用?
- [转]为什么ListView.setOnItemClickListener、setOnCreateContextMenuListener会无效
- 为什么其他类没继承System类 ,也可以直接使用System.exit()方法??
- 新人千万不要在 Windows 上使用 Ruby on Rails (整了好久,没整出来,看到这个帖子,直接不整windows了)
- 为什么我的电脑在cmd中不能直接使用命令的解决办法
- 为什么不直接使用Response.Write而要使用Response.Output.WriteLine
- input 控件里同时使用onclick onserverclick
- zz使用JProgressBar,进度条为什么从0直接跳到100
- 为什么ListView.setOnItemClickListener、setOnCreateContextMenuListener会无效为什么ListView.setOnItemClickListen
- String为什么推荐使用直接赋值的方式?