jQuery flotar en vivo

Question

Me parece que no puede convertir el siguiente en un vuelo estacionario en vivo

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

He intentado:

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

Pero no funciona.

Answer 1

De jQuery 1.7+ .live() es deprecated, y .delegate() ha sido superseded por el método .on().

Use .on() y .off() en lugar de .live() y .die(). Use .on() en lugar de .delegate().

La conversión del código anterior es directa as explained here.

---

es necesario llamar a los eventos que .hover() mapas a separado, como este:

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

.hover() no es una función evento como .click() es, por ejemplo, es just a special shortcut for .mouseenter(handler1).mouseleave(handler2) ... por lo que necesita hacer lo mismo en su llamada .

Si estás en jQuery 1.4.3+, se puede utilizar un mapa para simplificar las cosas, como este:

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

Además, si se trata de una específica <ul>, .delegate() es una mejor opción, como este:

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

Answer 2

La sintaxis .live() era más bonita, pero tenemos que usar .on(), ahora.

Puede utilizar un mapa de eventos en el documento, con el selector como el segundo argumento:

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

Answer 3

esto es cierto ...

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