jquery bind(click)传参让列表中每行绑定一个事件


Posted in Javascript onAugust 06, 2014

点击列表中某行,弹出详情的需求比较常见。用jquey bind 点击事件时,传参不注意可能会导致点击每一行都是显示相同内容的情况,这大多数是因为传参没注意引起的问题。简易代码如下:

for(var i=0;i<2;i++) { 
$("#b" + i).bind("click", {'bindText':bindText + i}, function(e){ 
butClick(e); 
}); 
}

测试代码:

<html> 
<head> 
<script type="text/javascript" src="/jquery/jquery.js"></script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
var bindText = 'AAA'; 
for(var i=0;i<2;i++) { 
$("#b" + i).bind("click", {'bindText':bindText + i}, function(e){ 
butClick(e); 
}); 
} 
}); 

function butClick(e) { 
alert(e.data.bindText); 
} 
</script> 
</head> 
<body> 
<button id="b0">请点击这里0</button> 
<button id="b1">请点击这里1</button> 
</body> 
</html>
Javascript 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
javascript实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 #Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 #Javascript
js触发select onchange事件的小技巧
Aug 05 #Javascript
jquery中each遍历对象和数组示例
Aug 05 #Javascript
js 动态修改css文件的方法
Aug 05 #Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 #Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 #Javascript
You might like
使用PHP Socket写的POP3类
2013/10/30 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
银行实习自我鉴定
2013/10/12 职场文书
行政部总经理岗位职责
2014/01/04 职场文书
黄金搭档广告词
2014/03/21 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
生产设备维护保养制度
2015/08/06 职场文书