克隆的元素不能被刪除

我有一個網格，如果用戶懸停在一個盒子上，該盒子的克隆被製作並直接放置在它上面（這是一個z-index/overlay事物）。當用戶用光標離開那個盒子時，應該播放一個動畫，並在其結尾處刪除該盒子（）。克隆的元素不能被刪除

問題是動畫完成但克隆沒有被刪除。我使用console.logs和警報來告訴我動畫是否完成，並且它警告的很好，但在動畫完成後克隆的客戶端沒有完成任何操作。下面是一個示例：

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

slideUp完成後，會觸發警報，但不會移除警報。

這裏有一個的jsfiddle所以你可以看到發生了什麼

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

來源

2013-02-28 dcap

正在調用'remove'。這只是你在DOM中有多個克隆。它正在刪除其中一個克隆，但其他的仍在，並且一直在'mouseenter'上添加。 – 2013-02-28 15:50:41

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

來源

2013-02-28 15:51:38

你可不可以添加'：not（'selected-client'）'到原始選擇器嗎？ – Blazemonger 2013-02-28 15:54:35

是的，這也是作品 – 2013-02-28 15:55:12

如果我理解正確的話，我認爲你要替換clonedClient.remove();

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

來源

2013-02-28 15:46:31 chead23

您正在使用$(document).on()，這意味着事件處理程序連接記錄。當您克隆您的元素時，類別.client也被應用於該克隆。當你在原始文件後插入克隆時，mouseenter再次被激發，因爲你輸入了新克隆的元素（這裏創建了另一個克隆）。

我的解決方案是在插入之前從克隆中刪除.client類。

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

來源

2013-02-28 15:51:50 Lian

我會刪除。客戶端，但它也綁定到CSS樣式 – dcap 2013-02-28 15:59:35

克隆的元素不能被刪除

回答

相關問題