在動態創建的標籤上添加事件

我在循環中的某個類名稱的腳本中創建了一些div。我想爲每個div添加onclick事件並通過點擊它們來獲得他們的innerHTML。但每次點擊我只能得到最後一個div的innerHTML。這裏是我的代碼：
在動態創建的標籤上添加事件

for(var i=0;i<10;i++) 
 
{ 
 
    var itemRow = document.createElement("div"); 
 
    itemRow.innerHTML = i; 
 
    itemRow.onclick = function(){ 
 
    return function(){ 
 
     console.log(itemRow.innerHTML); //which now returns only the last div innerHTML 
 
         
 
    }(); 
 
    } 
 
}

非常感謝

來源

2015-04-08 m0j1

不要將事件添加到每個div，這可能會導致大量div的性能問題。添加一個類似於jquery'的'委託處理程序https://api.jquery.com/on/ – Magrangs

可能的重複[如何將對象傳遞給onclick事件]（http://stackoverflow.com/questions/12501867 /如何傳遞一個對象到一個點擊事件） – mohamedrias

這是循環和事件回調的常見問題。您正在嘗試訪問函數中的變量，該變量將由for循環更新。這就是爲什麼你總是看到最後一個div innerHTML的原因。將代碼更改爲

for(var i=0;i<10;i++) 
{ 
    var itemRow = document.createElement("div"); 
    itemRow.innerHTML = i; 
    itemRow.onclick = getClickHandler(itemRow); 

} 

function getClickHandler(itemRow){ 
    return function(){ 
     console.log(itemRow.innerHTML); 
    } 
}

來源

2015-04-08 09:48:40

非常感謝，這對我來說非常合適:) – m0j1

你需要用一個IIFE函數內部循環的內容，以創建詞彙範圍，以使事件處理程序可以記住數據。

for(var i=0;i<10;i++) 
 
{ 
 
(function(i) { 
 
    var itemRow = document.createElement("div"); 
 
    itemRow.innerHTML = i; 
 
    itemRow.onclick = function(){ 
 
     alert(itemRow.innerHTML); 
 
    } 
 
    document.body.appendChild(itemRow); 
 
    })(i); 
 
}

否則很簡單，你可以使用this.innerHTML來獲取值出現。在點擊處理程序中，您將無法訪問在循環期間分配給它的itemRow。它將始終指向最後一個元素。爲了避免它只在那裏使用this.innerHTML。也不需要在事件處理程序中返回自執行功能。

編輯：添加演示

for(var i=0;i<10;i++) 
 
{ 
 
    var itemRow = document.createElement("div"); 
 
    itemRow.innerHTML = i; 
 
    itemRow.onclick = function(){ 
 
     alert(this.innerHTML); 
 
    } 
 
    document.body.appendChild(itemRow); 
 
}

來源

2015-04-08 09:47:30 mohamedrias

下來的選民可否請你注意說明投票的理由。所以，我可以理解並糾正:) – mohamedrias

當人們這樣做時，恨它。 – Magrangs

for(var i=0;i<10;i++) 
{ 
    var itemRow = document.createElement("div"); 
    itemRow.innerHTML = i; 
    itemRow.onclick = function(){ 
     console.log(this.innerHTML); 
    } 
    document.getElementById('main').appendChild(itemRow); 
}

檢查我下面的鏈接小提琴：

http://jsfiddle.net/9q1pLueq/

來源

2015-04-08 09:47:43 som

在動態創建的標籤上添加事件

回答

相關問題