jQueryUI, Funk-Taste Status, und klicken Sie auf Ereignisse

Ich habe eine Seite mit mehreren Gruppen von radio-buttons, die verwendet werden, um Optionen zu setzen. Wenn eines Klicks auf bestimmte, andere sind standardmäßig ausgewählt, mit click-Ereignishandler. Die Funktionalität funktioniert perfekt, aber es gibt ein Problem mit der Schaltfläche visual Zustand.

Bin ich mit jQueryUI ist .buttonsatz dazu () - Methode zur Verbesserung der ästhetik, und wenn ich auslösen .click () - Ereignis programmatisch, die Schaltfläche nicht ändern den Zustand, optisch. Dies kann dazu führen, die aktuellen Optionen ganz unterschiedlich aus, was auf dem Bildschirm erscheint.

Beispielcode um das problem zu veranschaulichen:

<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, wenn Sie so wünschen: http://jsfiddle.net/T5MGh/

Als Sie erwarten würden, wird die alert-box erscheint beim laden der Seite, wie es sollte, aber der button ändert sich nicht visuell, wie es von einem Benutzer auf.

Irgendwelche Gedanken?

InformationsquelleAutor Rookwood | 2010-06-19
  1. 7

    Können Sie auf die tatsächliche Bezeichnung, die Taste set verwendet, so wie hier:

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

    Dies funktioniert, weil Ihre Struktur sieht wie folgt aus, nachdem .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 nicht funktioniert zunächst, weil, wie jQuery UI, tut es, es setzt auf die click kommen durch die <label>, und die defult browser Verhalten tatsächlich auf die <input> aus, dass.

    • Funktioniert wie ein Charme. Danke! Ich hätte nicht gedacht, dass sich schnell ohne Hilfe.
    • Willkommen 🙂
    • Als Hinweis für jeden, der dies liest in der Zukunft, so scheint es, dass es immer noch notwendig .click() auf den radio-button, selbst, als gut. $('[für=button_id], #button_id').klicken Sie(); Ansonsten verändert sich optisch, aber nicht auf die eigentliche button-Zustand, der gegenüber dem ursprünglichen problem.
    InformationsquelleAutor Nick Craver
  2. 4

    Kann es vorkommen, dass in neueren Versionen von jQuery /jQuery UI, das Verhalten hat sich geändert, die das Verhalten der original-code gepostet, da diese Frage auf das, was der Autor dieser Frage wollte (Klick auf den button, der code übernimmt die Betreuung der beiden aufrufen der Ereignis-und optisch ändern-button).

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

    InformationsquelleAutor matanster
Schreibe einen Kommentar