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在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
在JS循环中使用async/await的方法
Oct 12 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
nginx部署多个vue项目的方法示例
Sep 06 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 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提取中文首字母
2008/04/09 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
python3图片文件批量重命名处理
2019/10/31 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
详解Python设计模式之策略模式
2020/06/15 Python
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
楼面经理岗位职责范本
2014/02/18 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
体育专业求职信
2014/07/16 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
销售会议开幕词
2015/01/28 职场文书
关于观后感的作文
2015/06/18 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
详解OpenCV曝光融合
2022/04/29 Python