jquery - ajax调用后绑定“悬停和删除”事件

Question

我制作了一个带有排序选项、悬停和每个图像上的删除按钮的图像库。

<ul id="media-list">
 <li id="media&28&28.jpg"><a href="../images/redcont/28.jpg" class="hover">
   <img src="../images/redcont/28.jpg"/></a><button class="deleteMedia">Delete</button>
 </li>
 <li ....
</ul>           

使用 AJAX，我将图像添加到图库。这工作正常，但悬停和删除按钮不适用于新添加的图像。

我用于悬停和删除事件的 jquery 脚本（适用于现有图像）是：

    $("#media-list .deleteMedia").click(function() {
       $(this).parent().remove();
    });

    // Hover images
    var offsetX = 20;
    var offsetY = -400;
    $('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();
    });
    $('a.hover').mousemove(function(e){
        $('#largeImage').css({'top':e.pageY + offsetY,'left':e.pageX + offsetX});
    });
    $('a.hover').click(function(e){
        e.preventDefault();
    });

我用这个 AJAX 代码推送图像：

$("#media-list").append("<li id ... </button></li>");

我该怎么做才能将“悬停和删除按钮”事件绑定到新图像，而不是加倍到现有图像？

标签： jqueryajaxevents