JQuery жить парить

Question

Я не могу показаться, чтобы преобразовать следующее в живое парение

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

Я попытался:

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

Но это не работает.

Answer 1

От JQuery 1.7+ .live() является deprecated и .delegate() был superseded методом .on().

Используйте .on() и .off() вместо .live() и .die(). Используйте .on() вместо .delegate().

Преобразование старого кода является простым as explained here.

---

Вы должны назвать события, которые .hover() карты в отдельности, как это:

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

.hover() не является функцией события, как .click() является, например, это just a special shortcut for .mouseenter(handler1).mouseleave(handler2) ... так что вам нужно сделать то же самое в своем вызове .

Если вы на JQuery 1.4.3+, вы можете использовать карту, чтобы упростить вещи, как это:

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

Кроме того, если это на конкретном <ul>, .delegate() является лучшим вариантом, например:

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

Answer 2

Синтаксис .live() был приятнее, но мы должны использовать .on(), сейчас.

Вы можете использовать карту событий на документе, с селектором, как 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

это верно ...

$("#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'); 
});