javascript - 为什么我的点击功能没有按预期工作？

Question

我创建了一个简单的 js 项目，它使用 leaflet.js 绘制一系列点。

然后，我想通过单击事件用点特定数据填充信息窗口。但我似乎无法让它发挥作用。

这大致是我所做的:

var circle = L.circle(
    [data[i]['latitude'], data[i]['longitude']],
    50,
    { color: 'red', fillColor: 'red', fillOpacity: .5}
).addTo(map)
.bindPopup(data[i]['SCHNAME'])
.on('click', fill_info_window(data, i));

function fill_info_window(data, i){ /* fill data */ }

不幸的是，它会自动用最新数据填充窗口。

为什么不起作用？

您可以在此处查看该项目:

http://www.thisisstaffordshire.co.uk/images/localpeople/ugc-images/275796/binaries/leaguetableTemplate.html

Answer 1

在这一行:

.on('click', fill_info_window(data, i));

...您正在调用 fill_info_window 函数，而不仅仅是引用它。你想做这样的事情:

.on('click', function() {
    fill_info_window(data, i);
});

除非你处于循环中(那个i变量让我觉得也许你是这样)。如果你是，那么:

.on('click', makeHandler(data, i));

...其中 makeHandler 如下所示:

function makeHandler(theData, index) {
    return function() {
        fill_info_window(theData, index);
    };
}

您不希望我的第一个答案出现在循环中的原因是所有处理程序都将引用相同的 data 和 i 变量，并查看它们的值从处理程序被调用时开始，而不是在其注册时开始。这就是为什么我们使用 makeHandler 函数来代替，这样它就不会改变的东西创建了一个闭包。更多内容请参见我的博客:Closures are not complicated