Question

我在以下JavaScript函数中遇到问题。

我正在尝试根据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));
}

Answer 1

使用立即功能。改变这一部分：

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

像这样：

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

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

Answer 2

单独创建您的功能，如下所示

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

并设置按钮onclick属性，如下

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

Answer 3

只需修改此部分：

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。

动态创建具有不同事件调用的按钮

3 个答案: