JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解
有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说
1
2
3
|
<input type= "text" name= "username" id= "username_1" value= "" />
<input type= "text" name= "username" id= "username_2" value= "" />
<input type= "text" name= "username" id= "username_3" value= "" />
|
现在有个循环,在页面载入的时候需要给这每个元素增加一个onclick事件,很容易想到的写法就是
1
2
3
4
5
6
7
|
$( function (){
for ( var i=1; i<=3; i++){
$( '#username_' +i).onclick( function (){
alert(i);
});
}
});
|
这么写是错误的。。。
错误的原因以及类似的错误分析详见这篇文章《深入理解JQuery循环绑定事件》
然后改成下面的就对了
1
2
3
4
5
6
7
8
9
10
|
$( function (){
for ( var i=1; i<=3; i++){
$( "#username_" +i).bind( "click" , {index: i}, clickHandler);
}
function clickHandler(event) {
var i= event.data.index;
alert(i);
}
});
|
举例:
$(function(){
for(var n=1;n<menulist.length;n++){
$(".rm-container #level"+menulist[n].id+" a").bind("click", {index: menulist[n].name}, clickHandler);
}
function clickHandler(event) {
var i= event.data.index;
alert(i);//输出a标签的名字
return false;//点击a之后,控制页面不跳转
}
});
转载于:https://www.cnblogs.com/limeiky/p/6094340.html
JQuery在循环中绑定事件的问题详解相关推荐
- js在for循环中绑定事件
// 控制准运证信息的展开for (var i=0; i<=res.info.navicerts.length; i++) {(function(i) {$('#collapse-btn'+i) ...
- JS中的事件委托 / 代理详解
[前言] 事件委托/代理是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的 [主体] 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用 ...
- let声明实现循环中的事件可拿到每个计数器的值asdsa
let 和 var // 循环中绑定事件,在事件内使用循环每次的计数器var ali = document.querySelectorAll(".list li");for(var ...
- jQuery中绑定事件的几种方法
以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",functi ...
- 这就是为什么我们需要在React的类组件中绑定事件处理程序
by Saurabh Misra 索拉·米斯拉(Saurabh Misra) 这就是为什么我们需要在React的类组件中绑定事件处理程序 (This is why we need to bind ev ...
- react中绑定点击事件_在React中绑定事件处理程序的最佳方法
react中绑定点击事件 by Charlee Li 通过李李 在React中绑定事件处理程序的最佳方法 (The best way to bind event handlers in React) ...
- html学习 - jquery事件监听详解
html学习 - jquery事件监听详解 html学习 - jquery事件监听详解 监听方法 监听方法参数解释 click参数 事件自动执行问题解决 bind方法 live方法 监听方法 在jqu ...
- C#中WPF ListView绑定数据的实例详解
C#中WPF ListView绑定数据的实例详解 发布时间: 2019-03-09 19:29:46 来源: 互联网 作者: 晨曦888 栏目: C#教程 点击: 298 这篇文章主要介绍了C#中WP ...
- jQuery中getJSON跨域原理详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解 前几天我再开发一个叫 河蟹工 ...
最新文章
- android一天一次弹窗,Android自定义Toast,多次弹出时取消上次弹出,最后一次弹出为准...
- 深入推荐引擎相关算法 - 协同过滤
- Python基础知识 D9
- .NET (C#)ASP.NET 应用程序与页面生命周期
- 传说中的马尔科夫链到底是个什么鬼?
- linux中的numa和swap
- 《C语言程序设计》课后习题答案(第四版)谭浩强
- 计算机知识演讲稿,乔布斯的演讲稿 我们的IT梦想
- 【推荐算法 学习与复现】-- 深度学习系列 -- NFM
- PCB板HDI板几阶是什么意思
- 进程间各种通信方式的C++实现
- 甲方公司vs乙方公司
- 从零开始学python第13天
- 如何用excel制作图表?
- android 11.0 12.0控制屏幕亮屏和灭屏操作
- Bluetooth Profile Specification之2.0 SPP配置文件
- 手机中的Zip格式文件解压和文件夹的压缩
- python报错:TypeError: missing 1 required positional argument: ‘self‘
- 2020·RDC·RT-Thread开发者大会圆满落幕!
- 论文阅读:Attentive CutMix
热门文章
- 模型保存的方法-----仅保存架构
- java consumed_Java设计模式—生产者消费者模式(阻塞队列实现)
- 基于特征融合的图像情感识别
- java中jsp时间插件_日期插件 - WEB源码|JSP源码/Java|源代码 - 源码中国
- 炮姐ed计算机谱子,炮姐来了!《科学超电磁炮T》正式PV公开 1月开播_游侠网 Ali213.net...
- 广外大全国计算机,广外全国计算机等级考试考生人数再创新高
- java实现工单派发_编写官方微信支付 Java SDK 的同学领下工单!
- python 打印皮卡丘_来简单聊聊python的装饰器呀~
- Java的IO操作(五) - PrintStream类、字符流、Reader和Writer、带缓冲的字符流BufferedReader和BufferedWriter...
- c语言成绩查询系统_如何用Excel制作成绩查询系统-Leo老师