jQuery klicken/ändern Funktion auf Radio Button Set

Question

Ich habe eine Radio-Button-Set namens "pick_up_point". Es gibt 3 Optionen, und wenn Sie auf eine Option klicken, wird eine Reihe von für die Option relevanten Eingabefeldern angezeigt.

Jetzt standardmäßig, wenn der Benutzer auf eine Option klickt, führe ich die change() -Funktion aus, die eine Funktion namens "clearInputFields" ausführt - was, wie Sie vielleicht raten, jeden in den Eingabefeldern eingegebenen Text löschen wird.

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

Jetzt habe ich erstreckt schon versucht, diese so, dass eine Aufforderung an den Benutzer angezeigt wird sie, dass die Eingabefelder gelöscht werden wissen zu lassen:

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

Die ‚Klick‘ Funktion ist vor dem " ändern 'Funktion.

Dies funktioniert "OK" in Firefox und funktioniert nicht ordnungsgemäß in IE.

In Firefox wird die Optionsschaltfläche ausgewählt und die Eingabeaufforderung wird angezeigt. Durch Klicken auf die Schaltfläche Abbrechen wird die vorherige Option mit allen beibehaltenen Werten wiederhergestellt.

In IE wird die Optionsschaltfläche ausgewählt und die Eingabeaufforderung wird angezeigt, aber die Werte werden gelöscht. Wenn Sie auf Abbrechen klicken, ist kein Optionsfeld ausgewählt.

Ich möchte, dass dies funktioniert, wenn Sie auf ein anderes Optionsfeld klicken, das es nur auswählen sollte, wenn Sie in der Eingabeaufforderung auf OK klicken. Wenn Sie auf Abbrechen klicken, sollten die Werte beibehalten werden.

Answer 1

In IE, das change Ereignis auf Checkboxen und Radiobuttons nicht sofort ausgelöst, sondern erst nach dem Feld hat unkonzentriert gewesen. Auf diese Weise verhält es sich wie Texteingabefelder.

jQuery Affen etwa mit dem Ereignis ganz erheblich, in einer Weise, die dieses Verhalten von Ihnen verbirgt. Es ist jedoch nicht in der Lage, das Verhalten anderer Browser im Internet Explorer genau zu reproduzieren, sodass es in einigen Fällen als Reaktion auf die Interaktion mit einem Element change auslöst, selbst wenn ein anderer click Event-Handler versucht, defaultDefault zu verhindern.

Ein weiteres Problem: in IE, wenn Sie return false von click auf einem Radio-Button, wird der neue Radio-Button aktiviert, aber die vorherige Taste wird immer noch seine checkedness verlieren Sie keine Radios geprüft zu verlassen!

Sie werden wahrscheinlich eine nervige Statusverfolgung durchführen müssen und die Optionsfelder manuell in den alten Zustand zurückversetzen, wenn die Bestätigung abgelehnt wird. zB:

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

Um sicherzustellen, dass die Auswahl tatsächlich geändert wurde, platzieren Sie den Funktionsaufruf im Ereignishandler .change und entfernen Sie den Ereignishandler .click.

Nicht wirklich sicher, dass Sie die Rückgabe xx Anweisungen benötigen, aber ich kenne nicht den Rest von Ihnen Code-Basis, so dass ich sie dort drin gelassen.

EDIT:

Um die Wirkung des .change gegen den .click zu zeigen (auf tatsächliche Änderungen) Ich habe eine kleine Demo zusammengestellt hier:

http://jsfiddle.net/KMjan/

Beachten Sie die Zählerinkrementierungen und zeigt an der Unterseite (nicht schick, aber zeigt den Punkt)

EDIT2: Einige Hinweise auf die Wirkung des Aufrufs einer Clear-Funktion innerhalb der Ereignisse für .click und .change

0 hinzugefügt

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

EDIT3: eine weitere Demonstration hinzugefügt, wo ich die Hintergrundfarbe auf Ereignis Blase an die Mutter div gesetzt, die Auswirkungen der Rückgabewert (wahr und falsch) zu zeigen - klicken Sie einfach auf die gleiche Radiobuttons mehrere Male, und Veränderung - verwenden Sie die negativen und positiven Antworten, um die Ergebnisse jeder Wahl zu sehen.

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

Diese zeigen die Notwendigkeit für die propogation Methoden Ereignis, das Sie untersuchen wollen könnte, wenn der Effekt dort nicht wie gewünscht ist.
Sehen Sie diese Seite, um Informationen über Event propogation: http://api.jquery.com/category/events/