javascriptで取り込んだ画像のwindow.URL.createObjectURLが正常に呼び出せない

Question

ローカルフォルダから複数の画像を呼び出しサムネイルを作成、そのURL.createObjectURLを正常に呼び出せません。本当の処理の代わりにchromeのデベロッパーツールのコンソールにてコメントにしましたが、どうも後に並ぶサムネイルクリック時にはURLが複数呼ばれているようで、コメントの右に回数を表す数字が付きます。おそらくこれが解決できれば本処理もうまくいくと思います。

document.getElementById( "target" ).addEventListener( "change", function() {
	var fileList = this.files ;
	for( var i=0,l=fileList.length; l>i; i++ ) {
		var blobUrl = window.URL.createObjectURL( fileList[i] ) ;

		$('.target').append('<a><img id="' + i + '" class="prepep" src="' + blobUrl + '" style="width:5vw"></a>');
		$('.prepep').on('click',function(){
		var src = $(this).attr('src');
		console.log('追加する画像のURLは'　+ src);
	});
	}
	});

例:5つの画像を呼び出し、左から順にクリックした場合
Console
⑤追加する画像のURLはblob:null/bf6f3004-5c5d-45d1-b290-54da289a08d6
④追加する画像のURLはblob:null/ccab700f-004a-45cb-b4a6-f770888295c9
③略
②略
追加する画像のURLはblob:null/dea1a5e5-2407-441f-a370-665c6fbc70d9

for文の回し方に問題があるのでしょうか。

Answer 1

$('.prepep').on('click',function(){
で、class="prepep" であるエレメントに対してクリックイベントを追加していますが、
1周目はclass="prepep"であるエレメントが1個存在、
2周目はclass="prepep"であるエレメントが2個存在、
3周目は・・・
という感じでイベントが重複追加されていると思います。

なので

        $('.prepep').on('click',function(){
            var src = $(this).attr('src');
            console.log('追加する画像のURLは'　+ src);
        });

はforループの外でいいと思います。

Comments

[Izumo1101]

回答ありがとうございます。
そうかクラスに対するクリックイベントの追加は1回で十分ですね。なるほど。どうして気づけないんだろうな・・・・。

ありがとうございました！