jquery - 画像の読み込み時にクラスを追加する

Question

次のコードは機能しません。画像にクラスは追加されません。理由はありますか？提案をありがとう。

$(document).ready(function () {    
 var starting_pics = ["AN.gif", "CN.gif", "EN.gif", "GN.gif"];    
 var i = 0;    
 for (i = 0; i < starting_pics.length; i++) {    
 $("<img/>").attr("src", "images/" + starting_pics[i]).load(function () {    
 $(this).appendTo("#main");    
 $(this).addClass(".pics");     
}); 

} 

 $(".pics").click(function () {    
 alert("Whatever");    
});

}); //end ready

Answer 1

試す

$(document).ready(function () {    
    var starting_pics = ["AN.gif", "CN.gif", "EN.gif", "GN.gif"];    
    var i = 0;    
    for (i = 0; i < starting_pics.length; i++) {    
        $("<img/>").attr("src", "images/" + starting_pics[i]).load(function () {    
            $(this).appendTo("#main");    
            $(this).addClass("pics");//when adding a class there is no need to prefix `.`
        }); 

    } 

    //need to use event delegation here since the images are added dynamically
    $("#main").on('click', ".pics", function () {    
        alert("Whatever");    
    });

}); //end ready