一段简单的代码，有点小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

...