循环中动态元素创建的JavaScript闭包问题_Javascript

循环中动态元素创建的JavaScript闭包问题

javascript

循环中动态元素创建的JavaScript闭包问题,javascript,Javascript,在页面执行期间，将生成一个字符串，其中包含需要作为click事件的处理程序执行的代码。字符串可能如下所示： var handler = '"myFunction1(12, 20);myOtherFunction();"'; 或当我动态创建按钮并尝试在循环中附加事件时，它只附加到最后一个按钮。我能感觉到一个结束问题，但我错过了什么这是代码 var buttons = [], arg1 = 12, arg2 = 20; var butt1 = { Text: 'Bye', onClick:

在页面执行期间，将生成一个字符串，其中包含需要作为click事件的处理程序执行的代码。字符串可能如下所示：

var handler = '"myFunction1(12, 20);myOtherFunction();"';

或

当我动态创建按钮并尝试在循环中附加事件时，它只附加到最后一个按钮。我能感觉到一个结束问题，但我错过了什么

这是代码

var buttons = [],
arg1 = 12,
arg2 = 20;

var butt1 = { Text: 'Bye', onClick: "anotherFunction();" },
butt = { Text: 'Hello', onClick: "myNewFunction();" },
butt2 = { Text: 'Bye333' };

buttons.push(butt1);
buttons.push(butt);
buttons.push(butt2);


function myNewFunction() {
   alert('my New  Function');
};

function myCloseFunction(arg1, arg2) {
    alert('close: ' + arg1 + ' other: ' + arg2)
}

function anotherFunction() {
    alert('Say Goodbye');
}

 window.onload = function () {
 var buttonContainer = document.getElementById('controlDiv'),
    closeOnClick = "myCloseFunction(" + arg1 + ", " + arg2 + ")",
    button;

for (var i = 0; i < buttons.length; i++) {
    buttons[i].onClick = (buttons[i].onClick == null) ? closeOnClick : (closeOnClick + ';\n' + buttons[i].onClick);
    button = document.createElement("INPUT");
    button.type = 'button';
    button.onclick = new Function(buttons[i].onClick);

    if (i > 0)
        buttonContainer.innerHTML += '&nbsp';
    buttonContainer.appendChild(button);
   }
};

我会这样做：

var buttons = [],
    container = document.getElementById('controlDiv');

    buttons.push(new Button('Bye', 'anotherFunction()'));

function Button(text, clickEvent){
    var obj = document.createElement('input'),
        self = this;

    this.text = text;
    this.clickEvent = clickEvent;

    obj.type = 'button';
    container.appendChild(obj);

    obj.addEventListener('click', handleClick);

    function handleClick(e){
        if(self.clickEvent){
            closeOnClick();
            window[self.clickEvent];
        } else {
            closeOnClick();
        }
    };
}

buttonContainer.innerHTML+='-这一行（或者更确切地说是重新设置innerHTML）就是问题所在。我认为innerHTML
属性不包含任何事件。按预期工作。
按钮[i].onClick=（按钮[i].onClick==null）？closeOnClick：（closeOnClick+'；\n'+按钮[i].onClick）i
被设置为buttons。length是否绑定了事件处理程序；这就是你的意思吗？xyu：是的，它确实约束了事件。很难说你想在这里完成什么。你读过吗？你真的需要动态地构建函数吗？或者带有常规函数的动态按钮就足够了吗？非常感谢。这段代码来自我必须使用的一些遗留代码库，我很高兴您发现了这个讨厌的问题。杰森：非常感谢。当涉及到重写代码时，我受到了限制，因为它是大型遗留项目的一部分，并且被大量使用。
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="Script.js" type="text/javascript"></script>
</head>
<body>
    <h1>hello</h1>
    <div id="controlDiv"></div>
</body>
</html>

button.onclick = (function (action, i) {
    var name1 = 'hello' + i,
        a123 = new Function('action', 'return function ' + name1 + '(){action();}')(action);
        return a123;
    } (new Function(buttons[i].onClick), i));

var buttons = [],
    container = document.getElementById('controlDiv');

    buttons.push(new Button('Bye', 'anotherFunction()'));

function Button(text, clickEvent){
    var obj = document.createElement('input'),
        self = this;

    this.text = text;
    this.clickEvent = clickEvent;

    obj.type = 'button';
    container.appendChild(obj);

    obj.addEventListener('click', handleClick);

    function handleClick(e){
        if(self.clickEvent){
            closeOnClick();
            window[self.clickEvent];
        } else {
            closeOnClick();
        }
    };
}