1

我有一个网格，如果用户将鼠标悬停在一个框上，则会生成该框的克隆并将其直接定位在其上方（这是一个 z-index/overlay 事物）。当用户用光标离开该框时，应该播放动画，并且在动画结束时该框被移除（）。

问题是动画完成但没有删除克隆。我使用console.logs 和alerts 来告诉我动画是否完成并且它会发出很好的警报，但是动画完成后对该克隆客户端所做的任何事情都不会通过。这是一个例子：

clonedClient.slideUp(300, function(){
        alert('ya');
        clonedClient.remove();
});

slideUp 完成后，会触发警报，但不会触发 remove。

这是一个 jsfiddle，所以你可以看到发生了什么

http://jsfiddle.net/Q6fVP/1/

4

3 回答 3

2

mouseenter 事件被触发两次（因为selected-client克隆，也有一个类client。如果在 mouseenter 事件中添加 console.log，你会注意到：

entering <div class=​"client">​hello​&lt;/div>​
entering <div class=​"client selected-client" style=​"background-color:​ red;​ position:​ absolute;​ top:​ 0.5em;​ background-position:​ initial initial;​ background-repeat:​ initial initial;​">​hello​&lt;/div>​

如果触发它的元素是您的selected-client.

即在您的第一个事件处理程序中：

if($this.hasClass('selected-client')){return;}

或者，更完整地，对于该代码块：

$(document).on({
    mouseenter: function(){
        var $this = $(this);
        if($this.hasClass('selected-client')){
            return;
        }
        var clientClone = $this.clone().css({background:'red', position:'absolute', top: '0.5em'}).addClass('selected-client');
        clientClone.insertBefore(this);
    }
}, 'div.client');
于 2013-02-28T15:51:38.753 回答
1

您正在使用$(document).on()，这意味着事件处理程序已附加到文档。当您克隆<div>元素时，该类.client也应用于克隆。而当你在原始元素之后插入克隆时，mouseenter又被触发了，因为你输入了新克隆的元素（这里制作了另一个克隆）。

.client我的解决方案是在插入之前从克隆中删除类。

http://jsfiddle.net/Q6fVP/8/

于 2013-02-28T15:51:50.493 回答
0

如果我理解正确，我认为您想替换clonedClient.remove();

和$('.selected-client').remove();

于 2013-02-28T15:46:31.440 回答