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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
PHP Include文件实例讲解
2019/02/15 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
星球大战与Python之间的那些事
2016/01/07 Python
用Django写天气预报查询网站
2018/10/21 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
类的核心特性有哪些
2014/01/01 面试题
自我检讨报告
2015/01/28 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
python中print格式化输出的问题
2021/04/16 Python
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL