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 "call, во-вторых, вы использовали скобки при обращении к функции (которая в этом случае должна упоминаться как объект без скобок).

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

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

}) 

Пожалуйста, смотрите исправленную версию here

Вы можете использовать event.data, если вы хотите, чтобы передать параметры в вызовах.

Исходный способ привязки события к идентификатору не является тем, о чем все. Лучше всего привязываться к объекту более высокого уровня в DOM (например, фактическому списку меню), а затем писать селектор, который будет влияют на детей на нем. Таким образом вы получите «делегированное событие», и любые динамически добавленные элементы будут работать так, как вы хотите.

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"); 
});