僅列出觸發最後一個

這裏是演示的全部代碼：http://jsfiddle.net/DF2Uw/4/僅列出觸發最後一個

基本上，我生成多個事件偵聽器與FOR循環。我生成了多個<selects>，並且想要檢測onChange事件並返回已更改的特定選擇的ID。然而，似乎只有最後一位事件監聽者能夠倖存，因爲其他人沒有觸發。

對此行爲的任何解釋？

HTML

<ol id="slots"></ol>

JAVASCRIPT

var slotnameHtml = ''; 
for (var i = 0; i < 3; i += 1) { 
    var slotname = document.createElement('select'), 
     slottime = document.createElement('select'), 
     slotlist = document.createElement('li'); 
    slotname.innerHTML = slotnameHtml; 
    slottime.innerHTML = '<optgroup><option value="1">00:01</option><option value="2">00:02</option></optgroup>'; 
    slottime.id='test'+i; 
    slotlist.appendChild(slotname); 
    slotlist.appendChild(slottime); 
    document.getElementById('slots').appendChild(slotlist); 
    slottime.addEventListener('change', function() { 
     alert(slottime.id) 
    });; 
}

來源

2014-04-09 cmplieger

新增了，謝謝！ – cmplieger

那是因爲你綁定到change處理程序不立即執行，但後來。與此同時，您的for循環已經運行，並且slottime已被彈回到其最終值（您創建的最後一個<select>元素）。所有的處理程序只會看到這個值。

您可以依次引入封閉的正確元素可訪問到處理程序：

document.getElementById("slots").appendChild(slotlist); 
(function(slottime) { 
    slottime.addEventListener("change", function() { 
     alert(slottime.id); 
    }); 
})(slottime);

由於Teemu在評論righfully說，最簡單的辦法是採取的事實，即this是綁定到處理器內部的目標要素：

slottime.addEventListener("change", function() { 
    alert(this.id); 
});

來源

2014-04-09 14:55:24

只要在事件處理函數中使用'this.id'會更簡單嗎？ – Teemu

@Teemu，是的，但這樣做並不能解釋提問者的根本問題:)但我會將其添加到我的答案中。 –

我不太熟悉閉包，所以會做一些研究:)。但代碼似乎工作。非常感謝！ – cmplieger

你必須使用以下警報參數insted的：

alert(this.getAttribute('id'));

來源

2014-04-09 14:59:35

爲什麼你在這裏使用這個?? ..這是什麼對應..這個globalobject？它是什麼時間？ –

當您調用該函數時，它將在調用函數時使用變量slottime的值，而不是在創建時使用該變量...您必須採用調用該函數的元素的id併爲此你應該使用這個 –

所以這對應於變量slottime ..right？ –

僅列出觸發最後一個

回答

相關問題