jquery中关于bind()方法的使用技巧分享


Posted in jQuery onMarch 30, 2017

.bind()方法可使用.on()方法来代替

on()方法提高代码易读性,如下

$("input").bind("click", { foo: "hello" }, handler);

$("input").on("click", { foo: "hello" }, handler);

bind()绑定事件的时候,这些元素必须已经存在,而on()可以处理类似于代理这样的东东,也就是说不存在的元素(动态生成的元素也可以处理),如下动态生成的 To do list ,再双击删除,可使用on()轻松完成,你会发现,on换成bind是不行的。

<input type="text" id="str">
<button id="btn">添加</button>
<h3>To do list</h3>
<ul></ul>
$(document).ready(function(){
 $('#btn').on('click',function(){
  var str = $('#str').val();
  $('<li>').text(str).appendTo('ul'); 
  $('#str').val('');
 })

 //To do list双击删除
 $(document).on('dblclick','li',function(){
  $(this).remove();
 })
});

on()事件绑定的妙用:我们经常要在网页里面处理大量的表格,假设表格有1000行,如果为每个tr都绑定一个click事件是非常占用内存的,而更加优雅的方法是:使用父元素tbody作事件代理,只需绑定一次,子孙元素tr上发生的事件会冒泡到tbody进行处理,节省开销

//效率低下的写法
$( "#dataTable tbody tr" ).on( "click", function() { \……

//换成优雅高效滴
$( "#dataTable tbody" ).on( "click", "tr", function() { \……

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
如何编写jquery插件
Mar 29 #jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 #jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 #jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 #jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 #jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 #jQuery
jQuery插件之validation插件
Mar 29 #jQuery
You might like
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php权重计算方法代码分享
2014/01/09 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
Underscore源码分析
2015/12/30 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
轮播图组件js代码
2016/08/08 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
Python ZipFile模块详解
2013/11/01 Python
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
python实现保存网页到本地示例
2014/03/16 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
用Eclipse写python程序
2018/02/10 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Pytorch 实现权重初始化
2019/12/31 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
英文翻译的自我评价语句
2013/10/04 职场文书
《春雨》教学反思
2014/04/24 职场文书
南京青奥会口号
2014/06/12 职场文书
小学生差生评语
2014/12/29 职场文书
杜甫草堂导游词
2015/02/03 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python