jquery點擊處理程序被分配到for循環後多次觸發

Question

我有一個縮略圖網格，您可以在其中單擊每個縮略圖並顯示警報。但是，在單擊縮略圖1之後，會顯示縮略圖1的提示，然後顯示縮略圖2，然後顯示縮略圖3等等。

我不確定發生了什麼，並嘗試關閉無效。

function addThumbnails(data) { 
    var $thumbnailList = $('.thumbnail-list'); 

    for (let i = 0, len = data.length; i < len; i++) { 
     let elementString = createImageElementString(data[i][0]); 
     $thumbnailList.append(elementString).on('click', 'a', function() { 
      alert('Thumbnail ' + i); //Issue 
     }); 
    } 
}  

Answer 1

我不知道我們可以追加點擊處理程序虛擬jQuery節點對象。

function addThumbnails(data) { 
    for (let i = 0, len = data.length; i < len; i++) { 
     let $elementString = $(createImageElementString(data[i][0])); 
     $elementString.on('click', function() { 
      alert(i); 
     }); 
     $('.thumbnail-list').append($elementString); 
    } 
} 

Answer 2

您分配click事件與在for循環的thumbnail-list類的每一個元素。我認爲你的意思是

let elementString = createImageElementString(data[i][0]); 
elementString.on('click', function() { 
    alert('Thumbnail ' + i); 
}); 
$thumbnailList.append(elementString);