jQuery żywo najechaniu

Question

nie wydaje przekonwertować następujących do żywego najechaniu

$("li.favorite_item").hover(
    function() { 
     $(this).append($(" <a href='#' class='button'>x</a>")); 
    }, 
    function() { 
     $(this).find("a:last").remove(); 
    } 
); 

próbowałem:

$("li.favorite_item"").live('hover', function() { 
    function() { 
     $(this).append($(" <a href='#' class='button'>x</a>")); 
    }, 
    function() { 
     $(this).find("a:last").remove(); 
    } 
}); 

Ale to nie działa.

Answer 1

Z jQuery 1.7+ .live() jest deprecated i .delegate() została superseded metodą .on().

Użyj .on() i .off() zamiast .live() i .die(). Użyj .on() zamiast .delegate().

Konwersja starszego kodu jest prosta as explained here.

---

Trzeba nazwać wydarzenia, które .hover() mapy oddzielnie, podobnie jak to:

$("li.favorite_item").live('mouseenter', function() { 
    $(this).append($(" <a href='#' class='button'>x</a>")); 
}).live('mouseleave', function() { 
    $(this).find("a:last").remove(); 
}); 

.hover() nie jest funkcją wydarzenie jak .click() jest, na przykład, to just a special shortcut for .mouseenter(handler1).mouseleave(handler2) ... więc trzeba zrobić to samo w rozmowie .

Jeśli jesteś na jQuery 1.4.3+, można korzystać z mapy, aby uprościć, tak:

$("li.favorite_item").live({ 
    mouseenter: function() { 
    $(this).append($(" <a href='#' class='button'>x</a>")); 
    }, 
    mouseleave: function() { 
    $(this).find("a:last").remove(); 
    } 
}); 

Ponadto, jeśli jest to na konkretnym <ul>, .delegate() jest lepszym rozwiązaniem, tak:

$("#myUL").delegate("li.favorite_item", { 
    mouseenter: function() { 
    $(this).append($(" <a href='#' class='button'>x</a>")); 
    }, 
    mouseleave: function() { 
    $(this).find("a:last").remove(); 
    } 
}); 

Answer 2

Składnia .live() była ładniejsza, ale musimy teraz użyć .on().

Można użyć mapy zdarzeń na dokumencie, z selektora jako argument 2:

$(document).on({ 
    mouseenter: function() { 
     $(this).append("<a href='#' class='button'>x</a>"); 
    }, 
    mouseleave: function() { 
     $(this).find("a:last").remove(); 
    } 
}, "li.favourite_item"); 

Answer 3

to prawda ...

$("#your_div_id").live('mouseover',function(){ 

    $(this).find(".child_div").css('background-color','#111111'); 

}).live('mouseout',function(){ 

    $(this).find(".child_div").css('background-color','#757575'); 
});