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

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

克隆的元素无法删除

3 个答案: