1

ユーザーがボックスにカーソルを合わせると、そのボックスのクローンが作成され、その真上に配置されるグリッドがあります（これはz-index / overlayのものです）。ユーザーがカーソルを持ってそのボックスを離れると、アニメーションが再生されることになっており、最後にボックスが削除されます（）。

問題は、アニメーションは完了しますが、クローンが削除されないことです。console.logsとalertsを使用して、アニメーションが完了したかどうかを通知します。アラートは正常に行われますが、アニメーションの完了後にクローンクライアントに対して実行することはすべて実行されません。次に例を示します。

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

slideUpが完了すると、アラートがトリガーされますが、削除はトリガーされません。

これがjsfiddleなので、何が起こっているかを確認できます

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

4

3 に答える 3

2

mouseenter イベントは 2 回トリガーされます (selected-clientクローンにも のクラスがあるためですclient。 mouseenter イベントに console.log を追加すると、次のことがわかります。

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

トリガーされている要素があなたの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');
于 2013-02-28T15:51:38.753 に答える
1

を使用し$(document).on()ています。これは、イベントハンドラーがドキュメントに添付されていることを意味します。要素のクローンを作成する<div>と、クラス.clientもクローンに適用されました。また、元のクローンの後にクローンを挿入するとmouseenter、新しくクローンされた要素を入力したため、再度起動されました（別のクローンがここで作成されました）。

.client私の解決策は、挿入する前にクローンからクラスを削除することです。

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

于 2013-02-28T15:51:50.493 に答える
0

私の理解が正しければ、あなたは交換したいと思いますclonedClient.remove();

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

于 2013-02-28T15:46:31.440 に答える