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

Question

我在数据包的最后一列显示了 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 class 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

使用委托(delegate)事件处理程序 - 执行代码时页面 #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 的第一列上。