使用 for 循环附加 onclick 方法

我将 onclick 事件附加到我动态创建的元素中。我正在使用下面的代码，这只是重要的部分。

Test.prototype.Show= function (contents) {
    for (i = 0; i <= contents.length - 1; i++) {
         var menulink = document.createElement('a');
         menulink.href = "javascript:;";
         menulink.onclick = function () { return that.ClickContent.apply(that, [contents[i]]); };
    }
}

首先它说它是未定义的。然后我更改并添加：

var content = content[i];
menulink.onclick = function () { return that.ClickContent.apply(that, [content]); };

现在发生的情况是它总是将最后一个元素附加到所有 onclick 事件（也称为元素）。我在这里做错了什么？

这是一个经典问题。当回调被调用时，循环结束，所以值i is content.length.

使用这个例子：

Test.prototype.Show= function (contents) {
    for (var i = 0; i < contents.length; i++) { // no need to have <= and -1
         (function(i){ // creates a new variable i
           var menulink = document.createElement('a');
           menulink.href = "javascript:;";
           menulink.onclick = function () { return that.ClickContent.apply(that, [contents[i]]); };
         })(i);
    }
}

这个立即调用的函数为新变量创建一个范围i，其价值因此受到保护。

更好的是，将处理程序的代码分离到一个函数中，既是为了清晰起见，也是为了避免不必要地创建和丢弃构建器函数：

Test.prototype.Show = function (contents) {
    for (var i = 0; i <= contents.length - 1; i++) {
        var menulink = document.createElement('a');
        menulink.href = "javascript:;";
        menulink.onclick = makeHandler(i);
    }

    function makeHandler(index) {
        return function () {
            return that.ClickContent.apply(that, [contents[index]]);
        };
    }
};

如果不需要，可以完全避免此问题的方法兼容IE8 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Browser_compatibility，是引入一个范围forEach，而不是使用for loop:

Test.prototype.Show = function (contents) {
  contents.forEach(function(content) {
    var menulink = document.createElement('a');
    menulink.href = "javascript:;";
    menulink.onclick = function() {
      return that.ClickContent.call(that, content);
    };
  });
}