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

Removing mouseenter event on dynamically created elements with jQuery

本文关键字：元素 mouseenter 事件 创建 jQuery 删除 动态 使用      更新时间：2023-09-26

在动态创建的元素上使用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()，因为这是一个位于Umbraco CMS中的数据类型，该CMS使用旧版本的jQuery，所以.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

在实际触发鼠标移动功能之前，悬停图像会显示一次：//有什么方法可以否决它吗？

我建议：

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

.die（）应该适合您。阅读上的文档

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

这样的东西应该行得通。

找到了一个可以在IE7+、Chrome和Firefox中使用的解决方案，尽管它有点难看（不确定这是否是一种轻描淡写的说法；-））：

在可排序的开始事件中，我创建了悬停图像的副本，并将其存储在一个变量中，然后将其从DOM中删除。然后在停止事件中，我将其预先添加到已拖动/排序的列表项中。代码：

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);
    }
});
相关文章：