how to show image preview on mouseover in datatable

Question

I want to show/hide image when mouse over on datatable's <td> data. I fill datatable when the button clicked. Here my codes

<script>
if($.fn.dataTable.isDataTable( '#example' )){
    var table = $('#example').DataTable();
}
function getData(){
    $('#example tbody').html('');
    var URL_PREFIX="http://localhost:8983/solr/archiveCore/select?q=strSO_copy:";
    var URL_MIDDLE="AND PackName_copy:";
    var URL_SUFFIX="AND DocType_copy:";
    var strSO="\"" + $("#ngramBoxstrSO").val() + "\"";
    var PackName="\"" + $("#ngramBoxPackName").val() + "\"";
    var DocType="\"" + $("#ngramBoxDocType").val() +"\"";
    var URL=URL_PREFIX + strSO + URL_MIDDLE + PackName + URL_SUFFIX + DocType;
    $.ajax({
        url:URL,
        dataType:'jsonp',
        jsonp : 'json.wrf',
        type :'get',
        cache :false,
        success: function(data){
            var docs=data.response.docs;
            var html='';
            $.each(docs,function(key,value){
                html+='<tr>';
                html+='<td>'+value.id+'</td>';
                html+='<td>'+value.strSO+'</td>';
                html+='<td>'+value.PackName+'</td>';
                html+='<td>'+value.DocType+'</td>';
                html+='<td>'+value.DocName+'</td>';
                html+='<td class="text-center"><button id="'+value.FilePath+'" type="button" onclick="openDocument(this.id)" class="btn btn-sm" >OPEN</td>';
                html+='<td class="text-center"><a href="#" class="preview">Image Preview<img src="~\images\TEC.jpg" class="hide-image" style="position:absolute;z-index:100;"></a></td>';
                html+='</tr>';
            });
            $('#example').DataTable().destroy();
            $('#example tbody').html(html);
            var table=$('#example').DataTable({
                "aaSorting" : [],

            });
        },
    });


};

</script>

I am using this jquery codes to show/hide image.

<script>
$(document).ready(function () {
    $(".preview").hover(function(){
        $(this).find('img').fadeIn();
     }, function(){
        $(this).find('img').fadeOut();
    });
});
</script>

I tried a lot of methods to do this but it's not working for me. Do you have any suggestions?

Answer 1

Since .preview is dynamically added, you have to use on()

Example:

$("body").on("mouseover", ".preview", function() {
  $(this).find('img').fadeIn();
});

$("body").on("mouseout", ".preview", function() {
  $(this).find('img').fadeOut();
});