javascript - 使用对象中的值添加onclick事件

在以下代码中，为什么postCodes[i].countryCode返回循环中的最后一个值，
而不是循环中的当前值？
以及如何在循环中返回当前值？

for (var i = 0; i < postCodes.length; i++) {
    for (var ind = 0; ind < salesSuite.Defaults.Countries.length; ind++) {
        if (postCodes[i].countryCode == myNamespace.Countries[ind].code) {
            $('<button/>')
                .click(function () {
                    console.log(postCodes[i].countryCode);
                })
                .appendTo($modalContent);

最佳答案

尝试添加一个获取处理程序的函数，该处理程序创建一个本地变量来保存该postCode。当然，这是因为在处理程序中使用了共享变量i，该共享变量在调用处理程序时会用完，所以最终在您的处理程序中，您尝试调用与postCodes[postCodes.length].countryCode相同的undefined.countryCode >，并会引发错误。

$('<button/>')
     .click(getHandler(postCodes[i]))
     .appendTo($modalContent);
.....
.....

function getHandler(postCode){
// This function creates a closure variable postCode which will hold that particular postCode passed in for each invocation to be used in the function reference returned by this
  return function () {
        console.log(postCode.countryCode);
   }
}

Demo

您可以利用jquery数据api来保存postCode，而不是做所有这些事情。

  $('<button/>')
            .click(function () {
                console.log($(this).data('postCode').countryCode);
            })
            .appendTo($modalContent).data('postCode', postCodes[i]);

Demo