Bind 'hover and delete' event after ajax call

Question

I've made a image gallary with sortabele options, hover and a delete button on every image.

<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>

With AJAX I add an image to the gallery. This works fine, but the hover and the delete button doesn't work for the new added images.

My jquery script for the hover and delete event (what works well for the existing images) is:

    $("#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();
    });

I push the image with this AJAX-code:

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

What could I do to bind the 'hover and deletebutton' events to the new image, and not double to the existing images?

Bind 'hover and delete' event after ajax call

0 Answers0