hover缩放不适用于数据表的第二页

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

$.each(data,function(i,d){ d['index']=i+1; url = url d["ad_image"] = '' }) 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

使用委托事件处理程序 – 执行代码时页面＃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 （最后一行）并将鼠标hover在具有类.img-zoom第一列上。