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 相关文章推荐
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 Javascript
微信小程序实现简单购物车功能
Dec 30 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
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
雪山饭庄的创业计划书范文
2014/01/18 职场文书
关于运动会的稿件
2014/02/02 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
详解pytorch创建tensor函数
2022/03/22 Python