一段简单的代码，有点小bug，为什么在绑定的事件中总是最后一个元素不能触发事件呢？还望大神指教

Question

$(function () { function Products(){           this.pic=$('.pic');           this.init()    }    Products.prototype={       init:function(){         this.bindEvent()       },         bindDom:function(k){                          var html = [                 '<dl>',                      '<dt><a href="javascript:;"><img class="pic" src="'+k.image+'" width="384" height="225" /></a></dt>',                      '<dd>',                        '<span>',                          '<a href="javascript:;">',                          '<em>'+k.discount+'</em>'+k.title+'',                        '</a>',                      ' </span>',                     '</dd>',                    '<dd class="price">',                      '<em>'+k.newPrice+'</em>',                      '<del>'+k.oldPrice+'</del>',                      '<i>'+k.time+'</i>',                   '</dd>',                 '</dl>'             ].join("");             $("#container").append(html);                   },        bindEvent:function(){              var _this=this;             this.pic.hover(function(){                 $(this).css({'transform':'rotate(360deg)'});             },function(){                 $(this).css({'transform':'rotate(0)'});             });                //总是最后一个元素不能触发该旋转事件，还望大神指教        }    };      //data为获得的json数据    $.each(data,function(i,v){        //v为数据每一项        new Products().bindDom(v)    })})

Answer 1

...