Jqueryマウスの入力とマウスがli要素で動作しないままにする

Question

jqueryマウスの入力とマウスの残し機能を使用しようとしています。 これは私のコードです： のhtml：

<ul class="menuList bold"> 
     <li id="tevee"> 
     <span>test</span> 
     </li> 
    </ul> 

jqueryの

$(function(){ 
    $(".tevee").on("mouseenter",".menuList",hoverInFunction()); 

    $(".tevee").mouseleave(hoverOutFunction("tevee")); 

}); 

function hoverInFunction() 
{ 
    alert("hi") 
} 

function hoverOutFunction(variable) 
{ 
    alert("test"); 
} 

https://jsfiddle.net/tejareddy/dndvsudh/。これは私のバイブルです、彼らは代わりに彼らはページの読み込みではなく、私はそれらにマウスを乗せて起動時に動作していません。

Answer 1

は、まず、あなたのセレクタは "のために不正確であったが.on "関数を参照しているときにかっこを使用していました（この場合、かっこなしのオブジェクトと呼ぶ必要があります）。

$(function(){ 
    $(".menuList").on("mouseenter","li",hoverInFunction); 

    $(".menuList").on("mouseleave","li",hoverOutFunction); 

}) 

あなたが呼び出しにパラメータを渡したい場合は、event.dataを使用することができ、固定バージョンhere

を参照してください。

イベントをIDにバインドする元の方法は、.onがすべてではないため、DOM内の上位オブジェクト（実際のmenuListなど）にバインドしてから、その上の子供たちに影響を与えます。そうすれば、「委任されたイベント」を得ることができ、動的に追加されたアイテムは、あなたが望むように動作します。

Answer 2

から()

変更

$(function(){ 
    $("#tevee").on("mouseenter",".menuList",hoverInFunction()); 

}); 

を削除します。

$(function(){ 
    $("#tevee").on("mouseenter",".menuList",hoverInFunction) 

}); 

かのようにそれを行う：

$("#tevee").on("mouseenter",".menuList",function(){ 
    alert("hi") 
    }).on("mouseleave",".menuList", function(){ 
    alert("test"); 
});