javascript - 不需要的事件覆盖

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

这个问题可以通过理解闭包来解决。您的匿名函数(绑定(bind)到 click 事件)在用户单击链接之前不会被调用，并且当此行被执行时:

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 的值传递给该函数，从而创建一个新的闭包。