jquery-ui - jqueryでmouseleaveが機能しない

Question

jquery コードで mouseleave が機能しない

http://jsfiddle.net/alano/9Dr7T/29/

以下の私のjsコードを提供する

mouseleave: function () {
    $(this).find("div:last").remove();
}

Answer 1

問題はmouseleaveリスナーにはありません。問題は、これらのイベント ハンドラーをどのようにバインドし、そのためにバインドを解除するかです。div は削除されていましたが、すべてのmouseenterイベントで再読み込みされていました。何らかの理由で、 のセレクタフィルタを使用すると、mouseenter イベントがアンバインドされませんでした.on()。おそらく、セレクターフィルターを使用した場合のバブリングの発生方法と関係があると思われます。

セレクターが提供されている場合、イベント ハンドラーは委任されていると見なされます。イベントがバインドされた要素で直接発生した場合、ハンドラーは呼び出されませんが、セレクターに一致する子孫 (内部要素) に対してのみ呼び出されます。jQuery は、イベント ターゲットからハンドラーがアタッチされている要素 (つまり、最も内側の要素から最も外側の要素) までイベントをバブルし、セレクターに一致するそのパスに沿ったすべての要素に対してハンドラーを実行します。

理由はまだ 100% わかりませんが、次のように直接バインドされたハンドラーを使用すると、どちらの方法でも機能します。

$('.specialHover').on({
    mouseenter: function() {
        $("<div class='cta'>add image</div>").click(function() {
            var $me = $(this);
            $me.parent().unbind('mouseenter').children('img').attr(
                'src', 
                'http://www.onlinegrocerystore.co.uk/images/goodfood.jpg'
            );
            $me.remove();
        }).appendTo(this);
    },
    mouseleave: function() {
        $(this).find('div:last').remove();
    }
});

参照: http://jsfiddle.net/9Dr7T/35/

Answer 2

この方法を試しましたか：

mouseleave: function () {
   $("div:last",this).remove();
}