2010-03-08 15 views
5

Digamos que tengo un escenario donde tengo un complemento global (o al menos un complemento que se une a una matriz más amplia de eventos).interacciones de eventos jquery .live()

Este complemento toma un selector y le ata un clic en vivo. Algo en pseudo-jquery que podría tener este aspecto:

$.fn.changeSomething = function(){ 
    $(this).live("change", function(){ alert("yo");}); 
} 

En otra página, tengo un vivo algo de unión adicionales como esto:

$("input[type='checkbox']").live("click", function(){alert("ho");}); 

Dentro de este escenario, la casilla de verificación lo ideal sería llegar a ser vinculado a ambos eventos en vivo.

Lo que estoy viendo es que el evento de cambio se dispara como debería, y me avisan "yo". Sin embargo, al usar este evento de clic en vivo, nunca lo disparo. Sin embargo, al usar un enlace de clic explícito, SI lo golpeo.

La solución fácil es desencadenar un evento de clic al final del controlador de cambio en vivo, pero esto me parece jodido. ¿Algunas ideas?

Tenga en cuenta que esto está usando jquery 1.4.2 y solo se produce en IE8 (supongo que 6/7 también, pero no los he probado).

un ejemplo (que necesita jquery-1.4.2.min.js):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<script src="jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $.fn.changeSomething = function(){ 
     var t = $(this); 
     t.live("change", function(){ 
      alert("yo"); 
     }); 
    }; 

    $(document).ready(function(){ 
    $("input[type='checkbox']").changeSomething(); 
    $("#special").live("click", function(){ 
     alert("ho"); 
    }); 
    }); 
</script> 
</head> 
<body> 
<form> 
    <input type="checkbox" id="cbx" /> 
    <input type="checkbox" id="special" /> 
    </form> 
</body> 
</html> 
+0

Se puede publicar el código en todo el ejemplo no funciona? p.ej. ¿Está envuelto en un listo? –

+0

Claro, mira mi edición más reciente. Un ejemplo bastante simple, pero este es básicamente el flujo. – ddango

+0

Escucho ambos disparos aquí cada vez, el cambio se dispara y luego el clic ... ¿qué navegador estás usando que tenga problemas? –

Respuesta

5

Usted sabe que el IE no se disparará el evento "cambio" hasta la casilla pierde el foco, ¿verdad?

edit mientras que creo que es cierto, el efecto de esa página de prueba es bastante extraño. Todavía estoy jugando con eso. El mecanismo "en vivo" me confunde y me pone un poco nervioso, aunque entiendo completamente su valor.

He puesto la página de prueba (ligeramente modificado y aclarado) hacia arriba: http://gutfullofbeer.net/clicks.html y voy a empezar a hacer algunas depuración jQuery

zona de penumbra: Como se señaló en los comentarios, cuando me ato un maniquí "cambiar" controlador al elemento del cuerpo:

$('body').bind('change', function() { return true; }); 

entonces las cosas comienzan a funcionar normalmente. Estoy seguro de que @Alex tiene razón, que está pasando algo con la forma en que jQuery está tratando de simular el burbujeo del evento de "cambio". Aún espeluznante sin embargo. La página de prueba está en http://gutfullofbeer.net/clicks-body.html y puede ver la rareza haciendo clic primero en "Configuración con controlador de cambios", luego haga clic en las casillas de verificación y observe que el manejador "clic" en el segundo solo dispara una vez, luego haga clic en "Enlazar un manejador" al cuerpo "y observar cómo se comportan las casillas de verificación después de eso.

+0

descubrimiento interesante, pero simplemente me hace pensar que es un error introducido en 1.4.x – ddango

+1

¡Muy posiblemente! Voy a publicarlo en el foro jQuery y ver si alguien puede explicarlo. – Pointy

1

Intente utilizar $.delegate con un ancestro común en lugar de $.live

La clave para recordar con live es que el evento es no unido al elemento seleccionado. Está limitado a document y luego, una vez que el evento aparece en el documento, se compara con el selector que pasó en el destino del evento.

La clave para aprender de eso es que en IE - el evento de cambio no burbujea naturalmente, como en la mayoría de los navegadores.En IE, el evento "burbujas" se basa en una heurística que funciona igual en todas las pruebas jquery como el evento real en otros navegadores. Es probable que haya algo en su otra función que impida que funcione esta heurística. Entonces tiene sentido que sea específico de IE. No es que eso es una buena cosa ...

+0

Hola Alex! A veces uso corbata. De todos modos, este es bastante extraño. Lo que he encontrado además del hecho de que el comportamiento cambia en función del orden del registro del manejador, también cambia si enlace directamente un manejador de "clic" a $ ('cuerpo'). Ese controlador se ejecuta, pero luego los manejadores de "hacer clic" y "cambiar" siempre se ejecutan para la casilla de verificación "especial". Voy a intentar "delegar". – Pointy

+0

corrección - Tengo que vincular un evento de "cambio" con el cuerpo, no con "hacer clic". – Pointy

+0

buena sugerencia, pero he intentado utilizar $ .delegate en su lugar ($ ("cuerpo"). Delegado ("# especial", "clic", función() {...});) pero esto no resuelve el problema. sin embargo, tenga en cuenta que cambiar el orden todavía funciona con delegate como lo hizo con live. – ddango

0

Puede utilizar el jquery.livequery plugin

$("select[name='majorsList']").livequery("change",function() 
{ 
alert('in'); 
});