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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
js 调整select 位置的函数
Feb 21 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 Javascript
编写v-for循环的技巧汇总
Dec 01 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
JavaScript实现多个物体同时运动
2020/03/12 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
python之django母板页面的使用
2018/07/03 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
施工员岗位职责
2014/03/16 职场文书
海飞丝的广告词
2014/03/20 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
庆祝儿童节标语
2014/10/09 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
干部考核工作总结
2015/08/12 职场文书
服务器间如何实现文件共享
2022/05/20 Servers