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

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

這么寫是錯誤的。。。

錯誤的原因以及類似的錯誤分析詳見這篇文章《深入理解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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

用jQuery解決IE不支持的option disable屬性
使用jQuery解決IE不支持的option disable屬性
2009-05-05
jquery實現(xiàn)下拉菜單的手風琴效果
這篇文章主要為大家詳細介紹了jquery實現(xiàn)下拉菜單的手風琴效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
通過JQuery，JQueryUI和Jsplumb實現(xiàn)拖拽模塊
這篇文章主要介紹了通過JQuery，JQueryUI和Jsplumb實現(xiàn)拖拽模塊，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下
2019-06-06
輕松搞定jQuery.noConflict()
輕輕松松搞定jQuery.noConflict()，jQuery.noConflict()背后實現(xiàn)原理值得Web開發(fā)者學習了解掌握，感興趣的小伙伴們可以參考一下
2016-02-02
jQuery實現(xiàn)驗證年齡簡單思路
本文給大家分享的是jQuery實現(xiàn)驗證年齡簡單思路，讓用戶填出生年月，然后根據(jù)當前時間計算是否小于網(wǎng)站要求的年齡，小于就提示，有需要的小伙伴可以拿去直接使用。
2016-02-02
jQuery實現(xiàn)MSN中文網(wǎng)滑動Tab菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)MSN中文網(wǎng)滑動Tab菜單效果代碼,基于jQuery鼠標事件實現(xiàn)頁面元素屬性動態(tài)切換的功能,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
jQuery實現(xiàn)用戶注冊的表單驗證示例
用戶注冊的表單往往是需要進行驗證的，否則會有一些不否合規(guī)則的數(shù)據(jù)入庫，后果會不堪設(shè)想，下面為大家詳細介紹下通過jquery是如何實現(xiàn)的，下面有個示例，感興趣的朋友可以參考下
2013-08-08
jquery刪除指定子元素代碼實例
這篇文章主要介紹了jquery刪除指定子元素代碼實例,本文使用較簡單的方法實現(xiàn)了這個需求,代碼一看就懂,需要的朋友可以參考下
2015-01-01
jQuery實現(xiàn)提交表單時不提交隱藏div中input的方法
這篇文章主要介紹了jQuery實現(xiàn)提交表單時不提交隱藏div中input的方法,結(jié)合實例形式分析了通過設(shè)置input的disabled屬性實現(xiàn)隱藏input提交的操作技巧,需要的朋友可以參考下
2019-10-10
JQuery插件fancybox無法在彈出層使用左右鍵的解決辦法
本篇文章主要是對JQuery插件fancybox無法在彈出層使用左右鍵的解決辦法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12