Removing mouseenter event on dynamically created elements with jQuery

Question

I'm having some trouble with my javascript when using jquery UI's sortable method on dynamically created elements. When I hover an image it displays a larger version of the image which follows the cursor within the thumbnail. Then, when I'm sorting/dragging an image it displays the larger image with it's position set to far away from the thumbnail. The larger image should be hidden when sorting :-)

I've made a screenr so it's easier for you to see what I mean: http://screenr.com/jjv8

My code for hooking up the events:

// Selected photos hover
$('ul li img').live('mouseenter', function () {
    var img = $(this);
    var imgDiv = $(this).parent().find('.hover-image');
    img.mousemove(function (e) {
        imgDiv.show();
        var x = e.pageX;
        var y = e.pageY - 50;
        imgDiv.css({ "top": y + "px", "left": x + "px" });
    });
});

$('ul li img').live('mouseleave', function () {
    $(this).parent().find('.hover-image').fadeOut('fast');
});

And my code for sorting:

selectedPhotosList.sortable({
    handle: '.selected-thumbnail-image',
    start: function (event, ui) {
        ui.item.find('.selected-thumbnail-image').die('mouseenter');
        ui.item.find('.hover-image').hide();
    }
});

Yes, I'm using .live() since this is a datatype which resides in Umbraco CMS which uses an older version of jQuery, so .on() doesn't work :-)

Anyone got a hint on how to get this to work?

Thanks a lot in advance.

All the best,

Bo

EDIT

I found the bug:

In my .live('mouseenter', function()... I'm calling imgDiv.show(); every time the cursor moves.

Doing it liks this works:

// Selected photos hover
$('ul li img').live('mouseenter', function () {
    var img = $(this);
    var imgDiv = $(this).parent().find('.hover-image');
    imgDiv.show();
     img.mousemove(function (e) {
         var x = e.pageX;
         var y = e.pageY - 50;
         imgDiv.css({ "top": y + "px", "left": x + "px" });
     });
});

$('ul li img').live('mouseleave', function () {
    $(this).parent().find('.hover-image').fadeOut('fast');
});

However, this creates another bug when using IE.: Screenr: http://screenr.com/1Iv8

The hover image is shown once before actually triggering the mousemove function :-/ Any way to overrule this?

Answer 1

.die() should work for you. Read the documentation on it

$('ul li img').die('mouseenter');

Something like that should work.

Answer 2

我建议：

$('ul li img').off('mouseenter');

Answer 3

Found a solution to this which works in IE7+, Chrome and Firefox, although it's a bit ugly (not sure if that is an understatement ;-)):

In the sortable start event I create a copy of the hover-image and store it in a variable then removing it from the DOM. Then in the stop event I prepend it to the listitem that has been dragged/sorted. Code:

var tempHoverImage = "";
selectedPhotosList.sortable({
    handle: '.selected-thumbnail-image',
    start: function (event, ui) {
        var hoverImage = ui.item.find('.hover-image');
        tempHoverImage = hoverImage;
        hoverImage.remove();
    },
    stop: function (event, ui) {
        ui.item.prepend(tempHoverImage);
    }
});