克隆的元素无法删除

Question

我有一个网格，如果用户盘旋在一个盒子上，那个盒子的克隆就会被制作并直接放在它上面（它是一个z-index / overlay事物）。 当用户使用光标离开该框时，应该播放动画，并在其末尾删除该框（）。

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

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

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

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

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

Answer 1

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

entering <div class=​"client">​hello​</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​</div>​

如果正在触发的元素是您selected-client ，则您将要省略mouseenter事件。

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

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

Answer 2

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

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

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

Answer 3

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

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