jquery - jQuery-ホバーが機能しない

Question

少し問題があります.hover()

ページの読み込み時に引き込まれるドリブルショットをいくつか取得しています。そして、何らかの理由で、ホバーを介してクラスを追加することは、それらに取り組みたくありません。

それは標準的なリストで完全にうまく機能しますが。

ここにjsFiddle

JS：

$("#dribbble li").hover(

function () {
    $(this).addClass("hover");
},

function () {
    $(this).removeClass("hover");
});

HTML

<div id="dribbble">
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Answer 1

委任を使用する-バインド時にdomで使用できないため、要素がバインドされていないと思います

$("#dribbble").on({
    mouseenter: function () {
       $(this).addClass("hover");
    },
    mouseleave:function () {
       $(this).removeClass("hover");
    }
},'li');

また、CSSを他のスタイルよりも優先させたい場合は、CSSをより具体的にする必要があります。

#dribbble li.hover {
    background-color:aqua;
}

フィドル

Answer 2

すでに存在する要素にイベントハンドラーをアタッチする必要があります。li要素を作成するときは、親にバインドしてから、必要な要素にフィルターをかける必要があります（これは、正しく実行された場合に実際に望ましいことです）。

試す：

$("#dribbble").on('mouseenter','li',function () {
    $(this).addClass("hover");
});

$("#dribbble").on('mouseleave','li',function () {
    $(this).removeClass("hover");
});