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 相关文章推荐
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
vue+echarts实现多条折线图
Mar 21 Vue.js
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对象转换为数组函数(递归方法)
2012/02/04 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
php简单日历函数
2015/10/28 PHP
php微信公众号开发之简答题
2018/10/20 PHP
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
python中的字典详细介绍
2014/09/18 Python
Python封装shell命令实例分析
2015/05/05 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
sort命令的作用和用法
2012/11/04 面试题
电子技术专业中专生的自我评价
2013/12/17 职场文书
中国央视网签名寄语
2014/01/18 职场文书
高一学生期末评语
2014/04/25 职场文书
大学专科自荐信
2014/06/17 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
读后感作文评语
2014/12/25 职场文书
python中Matplotlib绘制直线的实例代码
2021/07/04 Python