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 相关文章推荐
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 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页面防重复提交方法总结
2013/11/25 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
js可突破windows弹退效果代码
2008/08/09 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
Python内置模块logging用法实例分析
2018/02/12 Python
详解flask表单提交的两种方式
2018/07/21 Python
大数据分析用java还是Python
2020/07/06 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
彪马美国官网:PUMA美国
2017/03/09 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
房产销售独家委托书范本
2014/10/01 职场文书
晚会开场白和结束语
2015/05/29 职场文书
党员干部学习心得体会
2016/01/23 职场文书
Nginx源码编译安装过程记录
2021/11/17 Servers