javascript - 使用 jQuery 删除动态创建的元素上的 mouseenter 事件

Question

在动态创建的元素上使用 jQuery UI 的可排序方法时，我的 Javascript 遇到了一些问题。当我将鼠标悬停在图像上时，它会显示图像的较大版本，该图像跟随缩略图内的光标。然后，当我对图像进行排序/拖动时，它会显示较大的图像，并将其位置设置为远离缩略图。排序时应该隐藏较大的图像:-)

我制作了一个筛选器，以便您更容易理解我的意思:http://screenr.com/jjv8

我连接事件的代码:

// 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');
});

还有我的排序代码:

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

是的，我正在使用 .live()因为这是驻留在使用旧版本 jQuery 的 Umbraco CMS 中的数据类型，所以 .on()不起作用:-)

有人知道如何让它工作吗？

编辑

我发现了错误:

在我的 .live('mouseenter', function() ...我调用imgDiv.show();每次光标移动时。

这样做是可行的:

// 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');
});

但是，这会在使用 IE 时产生另一个错误。: Screenr: http://screenr.com/1Iv8

悬停图像在实际触发 mousemove 函数之前显示一次:-/有什么方法可以否决这个吗？

Answer 1

我建议:

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