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 相关文章推荐
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
Node.js文件操作详解
Aug 16 Javascript
js实现上传图片预览方法
Oct 25 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
基于vue实现分页效果
Nov 06 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
基于postman获取动态数据过程详解
Sep 08 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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 数组遍历顺序理解
2009/09/09 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
php 的反射详解及示例代码
2016/08/25 PHP
ajax java 实现自动完成功能
2012/12/19 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
DOM基础教程之事件对象
2015/01/20 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
python双向链表实现实例代码
2013/11/21 Python
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
python绘图方法实例入门
2015/05/19 Python
python对json的相关操作实例详解
2017/01/04 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
python实现的生成word文档功能示例
2019/08/23 Python
Python笔记之代理模式
2019/11/20 Python
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
人事科岗位职责范本
2014/03/02 职场文书
统计专业自荐书
2014/07/06 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
python 命令行传参方法总结
2021/05/25 Python
MySQL 时间类型的选择
2021/06/05 MySQL
SpringBoot生成License的实现示例
2021/06/16 Java/Android
分享7个 Python 实战项目练习
2022/03/03 Python