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变量以及其作用域详解
Jul 18 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
各种常用的JS函数整理
Oct 25 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 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 CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
PHP重载基础知识回顾
2020/09/10 PHP
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
python基本语法练习实例
2017/09/19 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
python+opencv实现阈值分割
2018/12/26 Python
python主要用于哪些方向
2020/07/05 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
金士达面试非笔试
2012/03/14 面试题
助人为乐表扬信范文
2014/01/14 职场文书
小学语文教研活动总结
2014/07/01 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
离婚财产分割协议书
2015/08/11 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android