Question

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

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

OR

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

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

这是代码。

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);
   }
};

HTML页面很简单：

<!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>

感知关闭问题我尝试了各种选项以关闭任何变量但未成功。 e.g。

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));

Answer 1

buttonContainer.innerHTML += '&nbsp'; - 这一行（或者更确切地说是重新设置innerHTML）就是问题所在。我不认为innerHTML属性包含任何事件。按预期工作here。

Answer 2

我会这样做：

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();
        }
    };
}

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

2 个答案: