動態創建具有不同事件調用的按鈕

我試圖根據results變量的細節動態創建按鈕。

該按鈕已創建並附加了一個事件，但似乎每個按鈕都附帶了完全相同的事件。

我需要地址變量對每個附加到按鈕的事件都有所不同，然後要添加該按鈕來替換我的macField變量中的文本。

function (results) { 
    var r; 
    var x, i; 
    var btn; 
    for (i = 0; i < results.length; i++) { 
     app.display("Paired to" + results[i].name + results[i].address); 
     x = document.getElementById("message2"); 
     r = results[i].address; 
     w = document.getElementById('macField').value; 
     btn = document.createElement('input'); 
     btn.onclick = function() { 
      document.getElementById('macField').value = r; 
     }; 
     btn.setAttribute('type', 'button'); 
     btn.setAttribute('name', 'sal' + [i]); 
     btn.setAttribute('id', 'Button' + [i]); 
     btn.setAttribute('value', results[i].name); 
     appendChild(btn); 
    } 
} 

function (error) { 
    app.display(JSON.stringify(error)); 
}

來源

2013-08-27 kelevra88

可能重複[Javascript閉合內循環 - 簡單實用的例子]（http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example） – Ian

使用即時功能。更改此部分：

btn.onclick = function() { 
    document.getElementById('macField').value = r; 
};

這樣的：

(function(r){ 
    btn.onclick = function() { 
     document.getElementById('macField').value = r; 
    }; 
})(r);

看一看：http://jsfiddle.net/uebD8/1/

來源

2013-08-27 13:27:01 Cherniv

哇，這很快，只是在那裏試過它，它的工作從來沒有見過這樣的功能，抱歉問，但有沒有解釋，你可以給它，它是如何工作的？ – kelevra88

歡迎你，你可以在這裏閱讀它，例如：http://blog.kevinchisholm.com/javascript/javascript-immediate-functions-basics/ – Cherniv

這是一個我從未想過要做的天才解決方案！通常，我所做的是將自定義屬性分配給存儲我想使用的值的按鈕，然後使onclick函數使用該屬性。但這是一種更有效的方法。至於它是如何工作的Maria88：在你的代碼中，你所有的onclick事件都會訪問同一個「r」變量，因爲只有（這是完全錯誤的術語，但我缺乏更好的描述方式）複製「r變量。使用閉包就像創建r變量的「多個副本」。（非常非常糟糕的代理，但我很累） –

創建功能seperately像下面

function macFieldValue(val)  
{ 
    document.getElementById('macField').value = val; 
}

，並設置按鈕onclick屬性這樣

btn.setAttribute('onclick', 'macFieldValue('+r+')');

來源

2013-08-27 13:35:42

就修改這一部分：

btn = document.createElement('input'); 
btn.onclick = function() { 
    document.getElementById('macField').value = r; 
};

到

btn = document.createElement('input'); 
btn.setAttribute('some_id', r); 
btn.addEventListener('click', 
function (e) { 
    var addr = e.source.some_id; 
    document.getElementById('macField').value = addr; 
}, false);

你打JS的一個不幸的詛咒。如果代碼不在for循環中，你的代碼就可以工作。無論如何，你應該使用addEventListener。

來源

2013-08-27 13:41:22 Vivek

動態創建具有不同事件調用的按鈕

回答

相關問題