JQuery在循環(huán)中綁定事件的問(wèn)題詳解

更新時(shí)間：2016年06月02日 10:14:53 投稿：jingxian

下面小編就為大家?guī)?lái)一篇JQuery在循環(huán)中綁定事件的問(wèn)題詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

有個(gè)頁(yè)面上需要N個(gè)DOM，每個(gè)DOM里面的元素ID都要以數(shù)字結(jié)尾，比如說(shuō)

<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="" />

現(xiàn)在有個(gè)循環(huán)，在頁(yè)面載入的時(shí)候需要給這每個(gè)元素增加一個(gè)onclick事件，很容易想到的寫(xiě)法就是

$(function(){
 for(var i=1; i<=3; i++){
  $('#username_'+i).onclick(function(){
   alert(i);
  });
 }
});

這么寫(xiě)是錯(cuò)誤的。。。

錯(cuò)誤的原因以及類(lèi)似的錯(cuò)誤分析詳見(jiàn)這篇文章《深入理解JQuery循環(huán)綁定事件》

然后改成下面的就對(duì)了

$(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);
 }
});

以上這篇JQuery在循環(huán)中綁定事件的問(wèn)題詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于jQuery的日期選擇控件
終于把jQuery拼寫(xiě)正確了哈，哈哈javascript也是區(qū)分大小寫(xiě)的,所以確實(shí)不能寫(xiě)錯(cuò)，今天我來(lái)和大家分享的是日期選擇控件的實(shí)現(xiàn)，功能也許不夠強(qiáng)大，但是能夠滿(mǎn)足需求。
2009-10-10
jQuery中add()方法用法實(shí)例
這篇文章主要介紹了jQuery中add()方法用法,實(shí)例分析了add()方法的功能、定義及匹配元素中添加與表達(dá)式匹配的元素使用技巧,需要的朋友可以參考下
2015-01-01
解決ztree搜索中多級(jí)菜單展示不全問(wèn)題
這篇文章主要介紹了ztree搜索中多級(jí)菜單展示不全的解決方法，需要的朋友參考下吧
2017-07-07
jquery操作select詳解(取值,設(shè)置選中)
本篇文章主要是對(duì)jquery操作select(取值,設(shè)置選中)進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
jQuery實(shí)現(xiàn)的頁(yè)面彈幕效果【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的頁(yè)面彈幕效果,涉及jQuery事件響應(yīng)與頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-08-08
jQuery實(shí)現(xiàn)鼠標(biāo)可拖動(dòng)調(diào)整表格列寬度
這篇文章主要介紹了通過(guò)jQuery實(shí)現(xiàn)鼠標(biāo)可拖動(dòng)調(diào)整表格列寬度,需要的朋友可以參考下
2014-05-05
jQuery TextBox自動(dòng)完成條
剛開(kāi)始學(xué)jQuery，于是想試試學(xué)習(xí)效果，所以就做了個(gè)這個(gè)TextBox自動(dòng)完成條，練習(xí)練習(xí)。請(qǐng)牛人們別笑話(huà)。
2009-07-07
jQuery怎么解析Json字符串(Json格式/Json對(duì)象)
可以利用jquery或js解析json數(shù)據(jù)，下面與大家分享下jquery解析json字符串方法，一個(gè)是解析Json格式，一個(gè)是解析Json對(duì)象，感興趣的朋友可以學(xué)習(xí)下
2013-08-08
深入理解(function(){... })();
很多朋友不清楚(function(){... })();這幾種寫(xiě)法各代表是什么意思，下面小編通過(guò)本教程給大家簡(jiǎn)單介紹下(function(){... })();知識(shí)，感興趣的朋友跟著小編一起學(xué)習(xí)吧
2016-08-08
商城常用滾動(dòng)的焦點(diǎn)圖效果代碼簡(jiǎn)單實(shí)用
此效果在網(wǎng)上使用的頻率比較多一點(diǎn)但大多是插件，要么JS寫(xiě)的太過(guò)于復(fù)雜童鞋們看起來(lái)有一定的難度，這個(gè)相對(duì)來(lái)說(shuō)比較簡(jiǎn)單一點(diǎn),感興趣的可以參考下哈
2013-03-03