jQueryUI, Optionsfeldstatus und Klickereignisse

Question

Ich habe eine Seite mit mehreren Gruppen von Optionsschaltflächen, die zum Festlegen von Optionen verwendet werden. Wenn man auf bestimmte klickt, werden andere standardmäßig mit Klick-Event-Handlern ausgewählt. Die Funktionalität funktioniert einwandfrei, aber es gibt ein Problem mit dem visuellen Status der Schaltfläche.

Ich benutze jQueryUI's .buttonset() -Methode, um die Ästhetik zu verbessern, und wenn ich ein .click() Ereignis programmatisch auslösen, ändert die Schaltfläche nicht den Status visuell. Dies kann dazu führen, dass die aktuellen Optionen sich von denen auf dem Bildschirm unterscheiden.

Beispielcode veranschaulichen das Problem:

<fieldset> 
    <label for="button1">Button 1</label> 
    <input type="radio" id="button1" name="test" /> 

    <label for="button2">Button 2</label> 
    <input type="radio" id="button2" name="test" /> 
</fieldset> 

$('fieldset').buttonset(); 

$('#button2').click(function() { 
    alert('button 2 clicked'); 
}); 

$('#button2').click(); 

ich auch eine Geige so können Sie es in Aktion sehen einrichten, wenn Sie dies wünschen: http://jsfiddle.net/T5MGh/

Wie man erwarten würde, die Warnung Die Box erscheint beim Laden der Seite wie sie sollte, aber die Schaltfläche ändert sich nicht visuell, wie es durch einen Benutzerklick geschieht.

Irgendwelche Gedanken?

Answer 1

können Sie auf die tatsächliche Bezeichnung, die die Schaltfläche Satz verwendet, wie folgt aus:

$('[for=button2]').click(); 

Dies funktioniert, weil Ihre Struktur sieht wie folgt aus nach .buttonset():

<fieldset class="ui-buttonset"> 
    <label for="button1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">Button 1</span></label> 
    <input type="radio" id="button1" name="test" class="ui-helper-hidden-accessible"> 

    <label for="button2" aria-pressed="true" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right ui-state-active ui-state-hover" role="button" aria-disabled="false"><span class="ui-button-text">Button 2</span></label> 
    <input type="radio" id="button2" name="test" class="ui-helper-hidden-accessible"> 
</fieldset> 

Es zunächst nicht funktioniert wegen der wie jQuery UI tut es setzt auf die click durch die <label> kommen, und das deflute Browser-Verhalten tatsächlich klicken Sie auf die <input> von Das.

Answer 2

Es kann scheinen, dass in neueren Versionen von jQuery/jQuery UI das Verhalten geändert hat, das Verhalten des ursprünglichen Codes als diese Frage zu dem, was der Autor dieser Frage gewünscht (das Klicken auf die Schaltfläche aus dem Code kümmert sich von beiden, die das Ereignis aufrufen und den Knopf visuell ändern).

Sie können das in der referenzierten jsfiddle auch sehen. Es scheint also, dass diese Antwort nur für ältere Versionen von jQuery/jQuery UI relevant ist.