使用闭包迭代带有变量的 jQuery 选择器

Question

[第一次使用stackoverflow。]我正在尝试将html按钮动态添加到我的页面，然后使用jQuery的单击为它们提供一个javascript函数以在单击它们时运行。我想为数组中的每个元素设置一个按钮，所以我使用了 for 循环。我的代码看起来像这样（简化）

for (var i = 0; i < results.length; i++) {
    $("#" + place[i].place_id).click(function(){console.log("Test");})        
    $("#" + place[i].place_id).click();
}

（我在同一个循环中注入具有正确 id 的按钮。）此代码在运行时，控制台记录“测试”正确的次数，但之后，只有最后一个按钮在单击时响应“测试”。 （这种情况有点荒谬。）所以，我认为事件处理程序最终只使用 i 的最终值来分配事件处理程序。我认为问题与闭包有关，但我不确定如何用 jQuery 选择器制作闭包（而且通常不熟悉它们）。

相比之下，作为 hack 解决方案，我在 for 循环之外“手动”编写了如下右下方的代码，并且它按预期工作，因为单击会导致控制台日志。

$("#" + place[0].place_id).click(function(){console.log("Test"););
$("#" + place[1].place_id).click(function(){console.log("Test");});
etc.

（当然，这一切都发生在更大的上下文中——特别是 Google Maps Places API 调用的回调。）

首先，我是否正确理解了这个问题？其次，什么会起作用？我应该完全采用不同的方法吗，比如使用 .each()？

（我稍后想在单击时显示 place[i] 的属性，我认为这需要另一个回调 我最终的 hack 代码如下所示：

$("#" + place[0].place_id).click(function(){google.maps.event.trigger(placeMarkers[0], "click"); repeated 20 times

Answer 1

为此，您可以简单地在 for 循环中创建一个自执行函数，如下所示：

for (var i = 0; i < results.length; i++) {
    (function(index) {
        $("#" + place[index].place_id).click(function() { 
            //Do something with place[index] here 
        });
    })(i);
}