forループで割り当てられた後にJqueryクリックハンドラが複数回起動する

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

あなたはforループでthumbnail-listクラスを持つすべての要素にクリックイベントを割り当てています。私はあなたが何をするつもりだったと思います

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