快捷導(dǎo)航

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

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

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

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

<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)，在頁面載入的時(shí)候需要給這每個(gè)元素增加一個(gè)onclick事件，很容易想到的寫法就是

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

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

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

然后改成下面的就對了

$(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)中綁定事件的問題詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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