懸停縮放在數據表的第二頁上不起作用

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類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類的第一列上。