jQuery hacer clic/cambiar función en el botón de opción

Question

Tengo un botón de opción configurado como "pick_up_point". Hay 3 opciones y al hacer clic en una opción se mostrará un conjunto de campos de entrada relevantes para la opción.

Ahora, de forma predeterminada, cuando el usuario hace clic en una opción, ejecuto la función change() que ejecutará una función llamada "clearInputFields", que como podrá adivinar borrará cualquier texto ingresado en los campos de entrada.

$("input[name='pick_up_point']").change(function() 
{ 
clearInputFields(); 
}); 

Ahora me han tratado de extender esto para que el símbolo se muestra al usuario para hacerles saber que los campos de entrada se borrarán:

$("input[name='pick_up_point']").click(function(event) 
{ 
if(confirm('Address details will be cleared. Continue?')) 
{ 
    return true; 
} 
else 
{ 
    return false; 
} 
}); 

La función de 'clic' es antes de la ' cambiar la función

Esto funciona "OK" en Firefox y no funciona correctamente en IE.

En Firefox el botón de radio es seleccionado y se visualiza el símbolo, y haciendo clic en el botón Cancelar volverá a la opción anterior con todos los valores retenidos.

En IE el botón de radio es seleccionado y se visualiza el símbolo, pero los valores de ser anulado a cabo. Si hace clic en Cancelar, no se selecciona ningún botón de radio.

La forma me gustaría que esto funcione es si hace clic en otro botón de radio no debe seleccionarlo menos que haga clic en OK en el indicador. Si hace clic en Cancelar, los valores deben conservarse.

Answer 1

En IE, el evento change de casillas de verificación y botones de radio no se dispara inmediatamente, pero sólo después de que el campo ha sido fuera de foco. De esta manera, se comporta como cuadros de entrada de texto.

jQuery monkeys sobre con el evento change bastante significativo, de una manera que oculta este comportamiento de usted. Sin embargo, no es capaz de reproducir con precisión el comportamiento de otros navegadores en IE, por lo que en algunos casos activará change en respuesta a la interacción con un elemento incluso cuando otro controlador de eventos click intente prevenirDefault.

Otro problema: en IE, si return false de click con un botón de opción, el nuevo botón de opción no se marcará, pero el botón anterior aún perderá su control, sin que se activen las radios.

Así que probablemente tenga que hacer algún tipo de rastreo de estado molesto, y colocar manualmente los botones de radio a su estado anterior cuando se rechaza la confirmación. por ejemplo .:

var currentradio= $("input[name='pick_up_point']:checked")[0]; 
$("input[name='pick_up_point']").change(function(event) { 
    var newradio= $("input[name='pick_up_point']:checked")[0]; 

    if (newradio===currentradio) 
     return; 
    if (confirm('Address details will be cleared. Continue?')) { 
     clearInputFields(); 
     currentradio= newradio; 
    } else { 
     currentradio.checked= true; 
    } 
}); 

Answer 2

Con el fin de garantizar que la selección de hecho cambió de lugar la llamada de función del controlador de eventos .Cambiar y quitar el controlador de eventos .click.

$("input[name='pick_up_point']").change(function(event) 
{ 
if(confirm('Address details will be cleared. Continue?')) 
{ 
    clearInputFields(); 
    return true; 
} 
else 
{ 
    return false; 
} 
}); 

No es muy seguro que necesitan las declaraciones xx de retorno, pero no sé el resto de ustedes base de código, así que los dejó allí.

EDIT:

Para demostrar el efecto de la .Cambiar vs el .click (en los cambios reales) He reunido una pequeña demostración aquí:

http://jsfiddle.net/KMjan/

Nota el contador se incrementa y aparece en la parte inferior (no es lujoso, pero demuestra el punto)

EDIT2: Se ha agregado alguna indicación del efecto de invocar una función clara dentro de los eventos para .click y .change

http://jsfiddle.net/KMjan/1/

Edit3: Añadido otra demostración donde hice el color de fondo de la burbuja evento para el div padre para demostrar los efectos del valor de retorno (verdadero y falso) - simplemente haga clic en los mismos botones de radio en múltiples ocasiones, y cambio - use las respuestas negativa y positiva para ver los resultados de cada elección.

http://jsfiddle.net/KMjan/3/

Estos muestran la necesidad de que los métodos de propagación de eventos es posible que desee investigar si el efecto no es el deseado.
Consulte esta página para obtener más información sobre el evento de propagación: http://api.jquery.com/category/events/