2. 程式人生 > >js迴圈繫結事件解決方案

js迴圈繫結事件解決方案

阿新 • • 發佈：2019-02-14
相信大家都遇到過類似的問題，for迴圈繫結完事件最後執行的時候都是最後一個事件相同，比如這段程式碼 
Java程式碼  收藏程式碼
  1. <body>  
  2. <ul id="list">  
  3. <li>1</li>  
  4. <li>2</li>  
  5. <li>3</li>  
  6. <li>4</li>  
  7. <li>5</li>  
  8. </ul>  
  9. <script>  
  10. var list_obj = document.getElementsByTagName('li'
    );  
  11. for (var i = 0; i <= list_obj.length; i++) {        
  12.   list_obj[i].onclick = function() {      
  13.     alert(i);      
  14.   }  
  15. }  
  16. </script>  
  17. </body>  

點選的時候彈出的不是0 1 2 3 4，而是5。 

解決方案也很多種，比如可以新建一個function設定一個私有方法，然後每次new一個object然後再繫結到它的方法上。 
還有就是閉包，寫法相對簡單： 
Java程式碼  收藏程式碼
  1. <body>  
  2. <ul id="list"
    >  
  3. <li>1</li>  
  4. <li>2</li>  
  5. <li>3</li>  
  6. <li>4</li>  
  7. <li>5</li>  
  8. </ul>  
  9. <script>  
  10. var list_obj = document.getElementsByTagName('li');  
  11. for (var i = 0; i <= list_obj.length; i++) {      
  12.   (function(){      
  13.     var p = i     
  14.     list_obj[i].onclick = function() {      
  15.       alert(p);      
  16.     }  
  17.   })();  
  18. }  
  19. </script>  
  20. </body>  

就是每個迴圈加上閉包，然後設定一個臨時變數，問題解決。 

相關推薦

js迴圈繫結事件解決方案

相信大家都遇到過類似的問題，for迴圈繫結完事件最後執行的時候都是最後一個事件相同，比如這段程式碼  Java程式碼   <body>   <ul id="list">   <li>1</li>   <li>

Js迴圈繫結事件處理

很多時候我們在開發過程需要for迴圈給元素組繫結js事件，但是直接敲的話，事件響應的效果只能和最後一個元素一樣，如下面的錯誤程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta c

js 回車鍵繫結事件

<label class="col-sm-1 control-label">快速搜尋<span style="color:red;"> </span> </label>

JS - 迴圈繫結實現，點選轉換CSS類

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>案例</title> <style type="text/css">

關於js中繫結事件失效問題

相信很多開始學習前端開發的朋友都發生過繫結事件失效的問題，那麼究竟是什麼原因使得事件失效呢？ 這裡作者以jquery庫編寫作為例子。 第一種：直接失效。 <html> <head> <script type="text/javascript" src="/j

for迴圈繫結事件時，var和let宣告迴圈變數的區別

在理解var、let、const三者在宣告變數的區別時，遇到了一道十分有意思的題：<body> <ul> <li>第一個li</li> <li>第二個li</li> <li>第三個li&

CADOCommand錯誤“ORA-01008：並非所有變數都已繫結”的解決方案

在用CADOCommand做Oracle傳參操作時，總是提示“ORA-01008：並非所有變數都已繫結”，但是仔細檢查引數匹配後，發現並沒有出現遺漏或者錯誤。 在另一個專案中是可以用傳參操作的，檢視連線方式，發現使用了MS的驅動 msdaora ，而不是Oracle驅動or

2種js動態繫結事件方法

1、使用原生JS動態為動態建立的物件繫結事件1-1、建立一個function，用來相容IE8以下瀏覽器新增事件 function addEvent(el, type, fun) { if (el.addEventListener) {

JS新增/繫結事件監聽函式並傳引數attachEvent和addEventListener相容個瀏覽器

   var fn =fun;    if(param)     {        fn =function(e)        {          fun.call(this, param);  //繼承監聽函式,並傳入引數以初始化;        }     }    if(obj.attachEven

js解決動態繫結事件時不能傳參的問題

問題描述: js使用dom給元素繫結事件時如果直接傳入引數, 會有傳參失敗並且語句會執行並沒有成功繫結事件的情況 舉個例子,假如我們有一個div (id="div1"), 我們想給它繫結一個onclick事件並傳入字串引數: (錯誤案例, 會導致如上後果) var div=doc

js模板載入script模板如何繫結事件以及事件屬性的解決辦法

在html頁面上有一段script的模板，給a標籤新增繫結click事件 <script type="text/x-handlebars-template" id="waterfall-tpl"> {{#result}}

JS實現迴圈給元素繫結事件的幾個常用方法

作為一個JS的初學者，想對一些元素迴圈繫結事件的時候總是出現各種問題，尤其是在對閉包沒有熟練掌握的時候更是一頭霧水。網上一查，果然好多初學者有這個困惑，既然這個問題總是出現，於是在我就總結了以下兩個比較好理解的解決方案，分享給大家：（可能還有更好的方式我沒有發現，請各位前輩

js迴圈給li繫結事件實現 點選li彈出其索引值 和內容

html程式碼   <ul> 　　<li>香蕉</li> 　　<li>蘋果</li>      <li>菠蘿</li> 　　<li>獼猴桃</li> 　

js/jQuery繫結將來生成的事件

HTML <button class="num1">點選生成按鈕</button> <div class="newbtn" id="newparent" style="width: 400px;height: 80px;border: 1px solid r

HTML多事件繫結（解決相容性問題）

/* *obj ：事件源物件 *eventStr:事件字串 *callback：事件觸發時執行的函式 */ function bind(obj,eventStr,callback){          &nbs

js繫結事件相容性寫法

<html> <body> <div id="div1">點我繫結事件</div> <script> var addEvent = function( elem, type, handler ){　　//重寫addEvent的好處是下一次呼叫時

jQuery: Ajax動態載入內容on()繫結事件無效的解決方法

問題描述 這是一個很普遍但又經常犯錯的問題，還是記錄一下。 一個例子 HTML: <div id="the_div"> </div> <button id="btn">test</button> javascript

python學習之網站的編寫（HTML，CSS，JS）（二十一）----------事件（例如點選事件等）及繫結事件的幾種方式

事件：什麼叫做事件呢，就是我們在頁面中的一些滑鼠和鍵盤操作，比如onclick就是點選事件，然後我們將介紹幾種繫結事件的方式。 1.在標籤中繫結 <div onclick="fuc()"></div> <script> fun

中文輸入法觸發input事件 js繫結事件:addEventListener和on的區別 select下拉框用empty()方法 清空option

中文輸入法觸發input事件 compositionstart 當瀏覽器有非直接的文字輸入時, compositionstart事件觸發. compositionend 當瀏覽器是直接的文字輸入時, compositionend事件觸發 解決方法： 這裡還有一個問題： 在有些瀏

JS與jQuery繫結事件的寫法

js 1.直接在html標籤中繫結 在html標籤中新增“on”+事件名稱的屬性來繫結事件 <button type="button" id="btn" onclick="alert(1)">點選</button> 2.在DOM元素上繫結 DOM元素新增‘