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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
javascript实现简易的计算器
Jan 17 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基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
深入理解js中this的用法
2016/05/28 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
Python写的一个简单DNS服务器实例
2014/06/04 Python
python关键字and和or用法实例
2015/05/28 Python
python实现图片处理和特征提取详解
2017/11/13 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
Python日志器使用方法及原理解析
2020/09/27 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
上海方立数码笔试题
2013/10/18 面试题
大二法学专业职业生涯规划范文
2014/02/12 职场文书
中班幼儿评语大全
2014/04/30 职场文书
学校食堂标语
2014/10/06 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
行政介绍信范文
2015/05/04 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL