Controladores de eventos jQuery que no se activan en IE

Question

Tengo una lista de elementos en una página con un conjunto de controles para MoveUp, MoveDown y Delete.

Los controles se encuentran en la parte superior de la lista ocultos de forma predeterminada. Como mouseover una línea de artículo, selecciono los controles con jQuery

//doc ready function: 
.. 
var tools = $('#tools'); 
$('#moveup').click(MoveUp); 
$('#movedn').click(MoveDn); 
$('#delete').click(Delete); 
.. 
$('li.item').mouseover(function(){ 
    $(this).prepend(tools); 
}); 

Esto funciona muy bien en Firefox .. las herramientas se mueven en la fila actual, y los eventos de clic llaman a las funciones ajax. Sin embargo, en IE6 e IE7 ... no se produce ningún clic. Intenté desvincularme de mouseout y rebinding en cada mouseover ... pero fue en vano.

También investigué varias razones fuera de javascript (por ejemplo, conflictos de png transparentes, índice z, posición: absoluta) .. tampoco se encontró ninguna solución.

Finalmente necesité agregar una fila de herramientas a cada elemento y mostrar/ocultar con el mouse sobre/salir. Funciona igual de bien; la única desventaja es que tengo mucho más marcado de "herramientas" en mi página.

¿Alguien sabe por qué IE ignora/cae/mata los eventos del mouse una vez que los objetos se mueven (usando prepend)? ¿Y por qué volver a unir el evento después tampoco tiene ningún efecto? Me mantuvo enojado durante casi 2 horas antes de darme por vencido.

Answer 1

IE perderá eventos dependiendo de cómo está agregando cosas al DOM.

var ele = $("#itemtocopy"); 

$("#someotheritem").append(ele); // Will not work and will lose events 

$("#someotheritem").append(ele.clone(true)); 

También recomendaría utilizar .live() en los eventos de clic para simplificar un poco su código. Mouseover/out aún no es compatible con live. http://docs.jquery.com/Events/live

Answer 2

tuve un problema similar. tratando de usar. listo para cargar un div en la carga de la página inicial. funciona bien en FF, pero no ie7.

he encontrado un truco que parece evitar esto.

Tengo load call a callback, divLoaded().

En divLoaded, compruebo el $ ('# targetdiv'). InnerText.length < 50 o lo que crea que indicará que no se cargó. Si detecto ese caso, simplemente llamo a la función que carga esa div nuevamente.

Por extraño que parezca, también agregué un '.' al texto interno antes de recordar la función ajax. Parece que algunas veces pasamos por 3 o 4 bucles antes de que la carga de ajax finalmente tome.

Esto me lleva a pensar que document.ready funciona bastante bien en IE7, lo que parece disipar un poco el mito de que no es confiable. Lo que realmente 'parece' estar sucediendo es que .load es un poco raro y no funciona bien cuando la página acaba de cargarse.

Todavía estoy un poco verde con todas las cosas jQuery, así que tome esto con un grano de sal. Interesado en escuchar la opinión de cualquiera sobre mi pequeña hipótesis.

aplausos

Greg

Answer 3

acabo de pasar todo el día la solución de problemas que desencadenan acontecimientos no en artículos adjuntas a la DOM, (IE7, jQuery 1.4.1) y no fue porque necesitaba usar en vivo() (aunque, es bueno saberlo, Chad), ni era porque necesitaba clonar los artículos.

Fue porque estaba seleccionando las etiquetas de anclaje que tenían un "#" en ellos, así:

var myitem = $('a[href=#top]'); 

Mi solución era utilizar el "atributo contiene Selector" de esta manera:

var myitem = $('a[href*=top]'); 

Afortunadamente tengo suficiente control sobre todo lo que probablemente no se rompa en el futuro. Esto no está técnicamente relacionado con los objetos adjuntos, pero con suerte le ahorrará a alguien algo de tiempo.