Hover zoom doesnt work on second page of datatable

Question

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 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);
}

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');
});

Answer 1

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')
})

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.