3

在动态创建的元素上使用 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 功能之前显示一次：-/ 有什么方法可以否决这一点？

4

3 回答 3

1

我建议：

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

于 2012-09-05T08:49:37.230 回答
0

.die() 应该适合你。阅读关于它的文档

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

像这样的东西应该工作。

于 2012-09-05T08:47:42.747 回答
0

找到了一个适用于 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);
    }
});
于 2012-09-05T10:35:36.347 回答