悬停缩放在数据表的第二页上不起作用

Question

我在databale的最后一列显示了img缩略图

$.each(data,function(i,d){
    d['index']=i+1; 
    url = url
    d["ad_image"] = '<a href="#" ><img src="'+url+'" class="img-zoom" /></a>'
})  
table = $('#datatable4').dataTable({
    'paging':   true,  
    'ordering': true,  
    'info':     true,  
    "destroy": true,
    "aaData" : data,
    aoColumns: [
      { mData: 'index' },
      { mData: 'ad_title' },
      { mData: 'ad_details' },
      { mData: 'ad_image' },
    ]
});

img-zoom 类 css :

.img-zoom {
width: 310px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
}

.transition {
-webkit-transform: scale(2); 
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}

但是当我转到第二页时，缩放图像不起作用...... 在第一页它的工作... 我如何在这里使用 fndrawcallback ？还是有其他选择？？

$('.img-zoom').hover(function() {
    $(this).addClass('transition');

}, function() {
    $(this).removeClass('transition');
});

Answer 1

使用委托的事件处理程序 - 执行代码时页面 #2 的内容不可用，这就是缩放在页面 #2 上不起作用的原因：

$('#datatable4').on('mouseenter', '.img-zoom', function() {
    $(this).addClass('transition')
})
$('#datatable4').on('mouseleave', '.img-zoom', function() {
    $(this).removeClass('transition')
})

更新。 hover 伪事件名称不能像我建议的那样使用，与hover() 做同样的事情。我的错。请改用上述解决方案，这是一个演示 -> http://jsfiddle.net/wa0oykv7/ 查找例如 seq #57（最后一行）并将鼠标悬停在具有 .img-zoom 类的第一列上。