IE7 y 8 no se activan jQuery haga clic en eventos para elementos anexados dentro de una tabla

Question

Tengo un error de IE que no estoy seguro de cómo solucionarlo.

Uso de jQuery Mover dinámicamente un menú para que aparezca en un elemento con el mouseover.

Mi código (simplificado) se ve algo como esto:

$j = jQuery.noConflict(); 

$j(document).ready(function() 
{ 
    //do something on the menu clicks 
    $j('div.ico').click(function() { alert($j(this).parent().html()); }); 

    setUpActions('#tableId', '#menuId'); 
}); 

//on mouseover set up the actions menu to appear on mouseover 
function setUpActions(tableSelector, menuSelector) 
{ 
    $j(tableSelector + ' div.test').mouseover(function() 
    { 
     //note that append will move the underlying 
     //DOM element with all events from it's old 
     //parent to the end of this one. 
     $j(this).append($j(menuSelector).show()); 
    }); 
} 

Este menú no parece registrar eventos correctamente para el menú después de que ha sido movido en IE7, IE8 e IE8-como-IE7 (sí MS, eso es realmente un 'nuevo motor de renderizado' en IE8, todos te creemos).

Funciona como se esperaba en todo lo demás.

Puedes ver el comportamiento en a basic demo here.

En la demo se pueden ver dos ejemplos de la cuestión:

1. La imagen de fondo de las teclas deben cambiar en vuelo estacionario (hecho con un CSS: Selector de vuelo estacionario). Funciona en el primer mouseover pero luego persiste.
2. El evento de clic no se activa; sin embargo, con las herramientas de desarrollo puede llamarlo de forma manual y todavía está suscrito.

Se puede ver (2) en las herramientas de dev de IE8:

1. abierto page en IE8
2. herramientas dev Abiertas
3. Seleccionar "escritura" ficha y "consola" sub-pestaña
4. Tipo: $j('#testFloat div.ico:first').click() para llamar manualmente a cualquier evento suscrito
5. Habrá una alerta en la página

Esto significa que soy no perdiendo las suscripciones al evento, todavía están allí, IE no las llama cuando hago clic.

¿Alguien sabe por qué ocurre este error (que no sea solo por el venerable motor de IE)?

¿Hay una solución?

¿Podría ser algo que estoy haciendo mal que simplemente funciona como se espera en todo lo demás?

Answer 1

Extrañamente, aunque su evento de clics no se activa en IE, si lo cambia a mousedown o mouse arriba, funciona como era de esperar, aunque todavía tiene problemas con la imagen estacionario.

$j('div.ico').mouseup(function() { alert($j(this).parent().html()); }); 

Answer 2

Recomiendo usar los eventos en vivo en lugar de los últimos jquery.

esta manera se puede obligar a los elementos de clase CSS que no han sido creadas al principio, pero se agregará la unión clic cuando se añaden los nuevos elementos:

http://docs.jquery.com/Events/live

Answer 3

IE no copia eventos a elementos añadidos dinámicamente al DOM.

Intente vincular su evento de clic una vez que haya agregado lo que necesita para estar atado o usar.live()

si está utilizando clone() recuerde pasar clone (verdadero) para solicitar explícitamente la copia de controladores de eventos.

var actionMenu = $j(menuSelector); 

//actionMenu is now an Instance of jQuery, not the DOM object 
//because jQuery is chainable 

actionMenu.hide(); 

// notice the clone(true) 

$j(this).append(actionMenu.clone(true)); 

jQuery es chainable, por lo que también se puede escribir esto en la sintaxis "jQuery" como:

var clone = $j(menuSelector) 
       .clone(true) 
       .css('background-color', $j(this).css('background-color')); 

$j(this).append(clone); 

No creo que necesita el mostrar/ocultar ya que ocurre tan rápido.

Answer 4

Tuve el mismo problema, pero ninguna de las soluciones anteriores funcionó. El problema resultó ser que IE7 (no he probado otras versiones de IE) no registrará el .click si está encadenado después de una función animada. Por lo que esto NO trabajo:

$("div.menubar-item").animate({ 
    color:"#000" 
}, 0) 

.click(function() 
{ 
    //not firing 
}) 

Pero esto VOLUNTAD trabajo

$("div.menubar-item").click(function() 
{ 
    //firing! 
}) 

$("div.menubar-item").animate({ 
    color:"#000" 
}, 0) 

EDITAR: Lo mismo es cierto para MouseEnter, mouseleave, etc.

EDIT 2: Todavía activará eventos y animará si encadena la función animada DESPUÉS del clic, por lo que s es "válido" también:

$("div.menubar-item").click(function() 
{ 
    //firing! 
}) 

.animate({ 
    color:"#000" 
}, 0)