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 相关文章推荐
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
VUE实现吸底按钮
Mar 04 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编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
一行python实现树形结构的方法
2019/08/09 Python
Django发送邮件功能实例详解
2019/09/02 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
班组长安全职责
2014/01/05 职场文书
鸦片战争观后感
2015/06/09 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
java中如何截取字符串最后一位
2022/07/07 Java/Android