傳單標記事件在錯誤的時間觸發

Question

我正在使用傳單 (v 0.7.7) 並且我有一個 Ajax 調用，它獲取一些服務器數據以可點擊文本標簽的形式綁定到我的地圖。 在我綁定從服務器獲得的 JSON 數據的循環中，我有以下代碼：

var item_name = L.marker([data.X, data.Y],
{
    icon: L.divIcon(
    {
        className:'MapTag', 
        iconAnchor: [10, 10],
        html:'<img src="/Images/Map/Item' + data.Id + '.png">' + data.Name 
    })
}).on('click', onItemClick(data.Id));

item_layer.addLayer(item_name);

在其他地方，我有 onItemClick 代碼：

function onItemClick(item_id)
{
    alert(item_id);
}

現在，好消息是，如果我注釋掉其中的事件綁定部分，循環就會完成，並且傳單的行為會正常。 但是，當我綁定 click 事件時，事情變得很奇怪。 該事件為我綁定的集合中的每個項目觸發一次。 當數據從服務器加載時，我每次通過帶有當前項目 ID 的循環都會彈出一個警報。 感覺它是被“onload”而不是“onclick”觸發的。 最重要的是，它也不會在加載后注冊 divIcons 上的點擊。

一定有什么我在這里失蹤了，但我看不到它是什么。 有什么建議？

這個問題類似於（ 傳單中的標記，點擊事件）

解決方案：我將 divIcon 聲明的最后一行更改為：

}).on('click', function(e){ alert(data.Id); });

這現在按預期工作。 我猜測奇怪的綁定行為是由於未綁定定義的方法引用和傳單在其事件管理代碼中具有某種功能崩潰。

我保留了“e”參數，因為它是傳單文檔顯示的內容。 我沒有使用它，但如果其他人復制粘貼它，他們可能需要它。

Answer 1

您混淆了函數引用和函數調用的概念，並且您沒有對項目 ID 進行閉包。

如果你聲明：

function onItemClick(id) { alert(id); }

這將打印對函數的引用：

console.log( onItemClick );

這將打印調用該函數的返回值（因為它不返回任何內容，這等於undefined ）：

console.log( onItemClick(5) );

所以當你這樣做時：

L.marker(....).on('click', onItemClick(id) );

該函數被調用，並且on()接收該函數的返回值，即：

L.marker(....).on('click', undefined );

您想要做的是有一個返回函數的函數：

function onItemClick(id) { return function(){ alert(id); } }

這樣，當你做

L.marker(....).on('click', onItemClick(5) );

這將進行一個函數調用，並使用返回值，現在看起來像這樣：

L.marker(....).on('click', function() { alert(5); } );