克隆的元素無法刪除

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