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

Answer 2

您可能希望将函数绑定为处理程序，而不是调用它的结果。因此，删除调用并使用….on('click', fill_info_window);。另请参阅this quirksmode article about event handling：无括号！。

为什么我的点击功能无法按预期工作？

2 个答案: