Добавление переключателя в набор кнопок jQuery во время выполнения

#jquery #jquery-ui

#jquery #jquery-пользовательский интерфейс

Вопрос:

Я пытаюсь добавить переключатель в набор кнопок во время выполнения. Это мой HTML:

 <form>
  <div id="container">
    <input type="radio" id="radio1" name="tipo" value="1"/>
    <label for="radio1">Alt1</label>

    <input type="radio" id="radio2" name="tipo" value="2"/>
    <label for="radio2">Alt2</label>   
  </div>
</form>
  

и это мой Javascript:

 $(function() {
  $("#container").buttonset();
  $("#container").append("<input type='radio' id='radio3' name='tipo' value='3'/><label for='radio3'>Alt3</label>");
  $("#container").buttonset();
})
  

Это показывает Alt1 и Alt2 в оболочке jQueryUI. Alt3 отображается как обычный переключатель. Если я закомментирую первый набор кнопок вот так, это сработает:

 $(function() {
  //$("#container").buttonset();
  $("#container").append("<input type='radio' id='radio3' name='tipo' value='3'/><label for='radio3'>Alt3</label>");
  $("#container").buttonset();
})
  

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

 $("#container").buttonset('refresh');
  

Но у меня это не работает.

Кто-нибудь нашел способ обойти это? Приведенный выше код является упрощенной версией того, что я пытаюсь сделать. Я добавляю в контейнер во время выполнения, и я хочу, чтобы переключатели отображались в стиле jQueryUI. Приведенный выше код упрощен, чтобы показать, в чем проблема.

Вы можете попробовать это сами здесь:http://jsfiddle.net/aembleton/vwemc /

Комментарии:

1. похоже, что это работает (я использую Chrome)

2. Я только что обновил URL до jsfiddle.net/aembleton/vwemc В предыдущем отсутствовал первый набор кнопок, вот почему он сработал. Я тестировал его в Chrome, и там он также был сломан.

Ответ №1:

Вот обновленная скрипка:http://jsfiddle.net/maniator/w6Fec/3 /

Вот код:

 $(function() {
    $("#container").buttonset();
    $("#container").append("<input type='radio' id='radio3' name='tipo' value='3'/><label for='radio3'>Alt3</label>");
    $("#container").buttonset('refresh');
})
  

По какой-то причине в вашем скрипте вы использовали 2 jQueryUI.

Комментарии:

1. Большое вам спасибо. Я вернулся назад и посмотрел на свой фактический код и понял, что когда я пытался вызвать .buttonset(‘обновить’); Я не вызывал .buttonset() перед hand, что приводило к сбою.