Después de la carga o actualización de jQuery ajax, pierdo el evento mouseover

Question

Después de usar .load para actualizar mi div, es decir, agregar elemento a mi lista, utilicé Firebug y vi que la lista se actualizó. Sin embargo, he perdido el evento mouseover que funcionó cuando la página carga por primera vez en mis .... JS scripts que tengo:

// hide and show are css classes that display none and block respectively 

function openList(){ 
    $("#miniList").removeClass().addClass("show"); 
} 
function closeList(){ 
    $("#miniList").removeClass().addClass("hide"); 
} 
... 
$(document).ready(function() { 
    $("#miniList").mouseover(function() { 
     openList(); 
    }) 
    $("#miniList").mouseout(function() { 
     closeList(); 
    }) 
}); 

---

function addItemToDiv(id, ref, num) { 
    $("#miniList").load("/list/ajax_updateList.jsp", { 
     'action' : 'additem', 
     'pid' : id, 
     'pref' : ref, 
     'qty' : num 
    }); 
} 

... Por supuesto, esto funciona bien la primera Hora en que se carga la página, pero cuando agrego un elemento a la lista, DOM se actualiza pero los efectos de mouseover ya no funcionan.

Cualquier idea es más que bienvenida. Muchas gracias de antemano.

Answer 1

Para los elementos del DOM añadidos dinámicamente debe usar la función jquery .live().

Por favor, vaya a través del siguiente enlace, creo que podría arreglar el problema:

api.jquery.com/live

@ishwebdev, esto es un problema común que corremos, por todo el DOM elments añadió después pageload como tiempo de ejecución, tenemos que obligar a los eventos a través vivo se unen en lugar de regular de

Si está utilizando jQuery 1.4 utilizar por debajo de código:

// desde jquery.com

$('give your selector here').live('mouseover mouseout', function(event) { 
    if (event.type == 'mouseover') { 
    // do something on mouseover 
    } else { 
    // do something on mouseout 
    } 
}); 

Answer 2

@siri: gracias por la excelente respuesta, funcionó para mí de inmediato. Aquí está mi carro de la compra desplegable ejemplo:

Antes:

$("#cart-items").mouseenter(function(){ 
    $('#cart-pulldown').show(); 
}); 

Después:

$("#cart-items").live('mouseenter', function(){ 
    $('#cart-pulldown').show(); 
}); 

Con .live el manejo de eventos sigue funcionando incluso después de cambiar el código HTML subyacente a través de una llamada Ajax.

Answer 3

La respuesta seleccionada ya no funciona para jquery 1.9+.

su lugar, utilice "en" evento, como

$(document).on("keyup", "input.assets",function(event) {... 

http://api.jquery.com/on/