悬停缩放在数据表的第二页上不起作用 [英] Hover zoom doesnt work on second page of datatable

问题描述

我在数据包的最后一列显示了img缩略图

I displayed img thumbnail on last column of databale

$.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 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?或还有其他选择吗?

But when I go to second page zoom image is not working... on the first page its working... how can I use fndrawcallback here?? or is there any other option??

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

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

推荐答案

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

Use a delegated event handler - the content of page #2 is not available when the code is executed, thats why the zoom not is working on page #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的第一列上.

Updated. The hover pseudo event name cannot be used as I suggested, doing the same thing as hover(). My bad. Use the above solution instead, here is a demo -> http://jsfiddle.net/wa0oykv7/ find for example seq #57 (the last row) and hover the mouse over first column which has the class .img-zoom.

这篇关于悬停缩放在数据表的第二页上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！