不需要的事件覆盖

Question

这是我的代码（简化）：

function FillTable ( oProfile_data ) {
    var oTable = document.getElementById ( "table" );
    for ( var key in oProfile_data ) {
        var oRow = oTable.insertRow ( oTable.rows.length );
        var oCell = oRow.insertCell ( 0 );
        var oLink = document.createElement ( "a" );
            oLink.href = "javascript:void(0)";
            oLink.innerHTML = "Visit Homepage";
            oLink.addEventListener ( "click",
            function () {
                var win = window.open ( oProfile_data [key]["url"], "_blank" );
                win.focus();
            }, false );
        oCell.appendChild ( oLink );
    }
}

问题是，每一行都有一个指向同一文档的链接，我不明白为什么！

我的临时解决方案是：

oLink.href = "javascript:void(0); var win = window.open ( "" + oProfile_data [key]["url"] + "", "_blank" ); win.focus();";

这很好用。我想这是一个压倒一切的问题，但我可能错了。

任何帮助都将不胜感激！

Answer 1

这是一个可以通过理解闭包来解决的问题。您的匿名函数（绑定到点击事件）直到用户点击链接才会被调用，并且当执行此行时：

var win = window.open ( oProfile_data [key]["url"], "_blank" );

key的值将包含在FillTable函数中。因此，它将保留函数结束时的值（即循环中的最后一个值）。

您必须为循环的每次迭代创建一个新的闭包。类似于：

oLink.addEventListener ("click",
(function (k) {
    return function () {
       var win = window.open ( oProfile_data [k]["url"], "_blank" );
       win.focus();
    }
 }
)(key), false);

上面，我们创建了一个函数，返回一个打开窗口的函数。然后，我们将key的值传递给该函数，从而创建一个新的闭包。