jQueryUI, состояние переключателя и события щелчка - PullRequest
Новая
       5

jQueryUI, состояние переключателя и события щелчка

7 голосов
/ 20 июня 2010

У меня есть страница с несколькими наборами переключателей, которые используются для установки параметров. Когда один щелкает на определенных, другие выбираются по умолчанию, используя обработчики событий щелчка. Функциональность отлично работает, но есть проблема с визуальным состоянием кнопки.

Я использую метод jbueryUI .buttonset () для улучшения эстетики, и когда я запускаю событие .click () программно, кнопка визуально не меняет состояние. Это может привести к тому, что текущие параметры будут сильно отличаться от того, что отображается на экране.

Пример кода для иллюстрации проблемы: 

<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();

Я также настроил скрипку, чтобы вы могли видеть ее в действии, если хотите: http://jsfiddle.net/T5MGh/

Как и следовало ожидать, окно оповещения появляется при загрузке страницы, как и должно быть, но кнопка не изменяется визуально, как это происходит при щелчке пользователя.

Есть мысли?

Ответы [ 2 ]

7 голосов
/ 20 июня 2010

Вы можете щелкнуть фактическую метку, которую использует набор кнопок, например: 

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

Это работает, потому что ваша структура выглядит следующим образом после .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>

Itизначально не работает из-за того, как это делает пользовательский интерфейс jQuery, он полагается на click, проходящий через <label>, и поведение браузера по умолчанию, фактически нажимающее на <input>.

4 голосов
/ 08 сентября 2012

Может показаться, что в более поздних версиях пользовательского интерфейса jQuery / jQuery поведение изменилось, в результате чего поведение исходного кода, опубликованного в виде этого вопроса, соответствовало желанию автора этого вопроса (нажатие на кнопку из кода заботится и вызов события, и визуальное изменение кнопки).

Вы также можете видеть это в jsfiddle, на который ссылаются. Похоже, этот ответ актуален только для более старых версий пользовательского интерфейса jQuery / jQuery.

...