Ajax加载DataTables内容后缩略图hover事件无法触发显示大图问题

问题描述 #

• 使用DataTables在表格第一列展示缩略图，配合jQuery实现鼠标hover缩略图时展示原始大图的效果
• 静态加载表格内容时功能完全正常，切换为Ajax动态加载表格后，hover事件无法绑定到新增的缩略图元素
• 已尝试多种方案、查阅事件委托相关资料未成功，需要可行的实现方案

相关DOM结构 #

<tr role="row" class="odd">
 <td class="dtr-control"><a href="../images/cont/257.jpg" class="hover">
   <img src="../images/redcont_thumb/1757.jpg" class="mediabank-preview-thumbnail"></a>
 </td>
 <td>Description</td>
</tr>

初始失效代码 #

$('a.hover').hover(function(e){ 
  var href = $(this).attr('href');
  $('<img id="largeImage" src="' + href + '" alt="image" />')
  .css({'top':e.pageY + offsetY,'left':e.pageX + offsetX})
  .appendTo('body');
}, function(){
  $('#largeImage').remove();  // Delete displaying picture
});
$('a.hover').mousemove(function(e){
  $('#largeImage').css({'top':e.pageY + offsetY,'left':e.pageX + offsetX});
});
$('a.hover').click(function(e){
  e.preventDefault();
});

最终可用实现方案 #

问题核心是直接绑定事件只会作用于页面初始化时已存在的DOM元素，Ajax动态新增的元素不会被绑定，改用事件委托绑定到页面加载时就存在的父级表格容器上，同时替换hover方法为mouseenter+mouseleave事件即可：

// Hover images
    var offsetX = 20;
    var offsetY = -250  
    $('#table_mediaBank').on('mouseenter', 'a.hover', function (e) {        
        var href = $(this).attr('href');
        $('<img id="largeImage" src="' + href + '" alt="image" />')
        .css({'top':e.pageY + offsetY,'left':e.pageX + offsetX})
        .appendTo('body');
    });
    $('#table_mediaBank').on('mouseleave', 'a.hover', function () {             // Verwijder het displayen van de afbeelding
        $('#largeImage').remove();
    });
    $('#table_mediaBank').on('mousemove', 'a.hover', function (e) {         verplaatsen
        $('#largeImage').css({'top':e.pageY + offsetY,'left':e.pageX + offsetX});
    });
    $('#table_mediaBank').on('click', 'a.hover', function (e) {         
        e.preventDefault();
    });

内容的提问来源于stack exchange，提问作者Nico van Wijk