克隆的元素可以'无法移除

Cloned element can't be removed

本文关键字：元素      更新时间：2023-09-26

我有一个网格，如果用户将鼠标悬停在一个框上，就会创建该框的克隆并直接放置在它上面(这是一个z索引/覆盖的东西(。当用户带着光标离开该框时，应该播放一个动画，并在动画结束时移除该框((。

问题是动画完成了，但克隆没有被删除。我使用console.log和警报来告诉我动画是否完成，警报是否正常，但动画完成后对克隆的客户端所做的任何操作都不会通过。这里有一个例子：

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

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

这里有一个jsfiddle，这样你就可以看到发生了什么

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

鼠标输入事件被触发两次(因为selected-client克隆也有一个client类。如果在鼠标输入事件中添加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>​

如果触发mouseenter事件的元素是您的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');

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

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

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

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

使用$('.selected-client').remove();

相关文章：