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（），因为这是一个驻留在Umbraco 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

在实际触发mousemove功能之前，悬停图像会显示一次： - /有什么方法可以推翻它吗？

Answer 1

.die（）应该适合你。 Read the documentation on it

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

这样的事情应该有用。

Answer 2

我建议：

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

Answer 3

找到了适用于IE7 +，Chrome和Firefox的解决方案，虽然它有点难看（不确定这是不是轻描淡写; - ））：

在可排序的启动事件中，我创建了hover-image的副本并将其存储在变量中，然后将其从DOM中删除。然后在stop事件中，我将它添加到已被拖动/排序的listitem。代码：

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

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

3 个答案: