Обновление набора кнопок jQuery работает не так, как я ожидал

Question

ОК - у меня есть функция, которую я вызываю для динамического добавления переключателя согласно этому вопросу .Это полная функция:

    // function used to create a new radio button
    function createNewRadioButton(
            selector,
            newRadioBtnId,
            newRadioBtnName,
            newRadioBtnText){

        // create a new radio button using supplied parameters
        var newRadioBtn = $('<input />').attr({
            type: "radio", id: newRadioBtnId, name: newRadioBtnName
        });

        // create a new label and append the new radio button
        var newLabel = $('<label />').append(newRadioBtn).append(newRadioBtnText);

        // add the new radio button and refresh the buttonset
        $(selector).append(newLabel).append('<br />').buttonset("refresh");
    }

Так что, если бы я вызвал вышеуказанную функцию со следующим кодом, я бы ожидал, что под переключателями, уже содержащимися в div '#radioX', будет добавлена ​​еще одна радиокнопка.(при условии, что есть div с id radioX, содержащим переключатели):

            // create a new radio button using the info returned from server
            createNewRadioButton(
                    '#radioX', // Radio button div id
                    product.Id, // Id
                    product.Id, // Name
                    product.Name // Label Text
            );

Учитывая, что в документе готово, я говорю jQuery создать набор кнопок из переключателей, содержащихся в #radioX, следующим образом: $( "#radioX" ).buttonset();, почему вызов функции $("#radioX").buttonset("refresh") в функции createNewRadioButton не обновляет список переключателей?

Результат, который я вижу после вызова createNewRadioButton, - это новая метка с желаемым текстом, но без новой радиокнопки.Поэтому вместо новой симпатичной радиокнопки jQuery, расположенной под тем, что уже было там, я вижу просто новую метку с текстом equivelant to product.Name (в данном примере).

Я также заметил этот вывод предупрежденияв firebug после вызова метода createNewRadioButton - это может иметь к этому отношение?

reference to undefined property $(this).button("widget")[0]

РЕДАКТИРОВАТЬ

Вот скриншот того, что я ожидал:

Вот скриншотчто происходит

Answer 1

Моя ошибка.На самом деле метод refresh хорошо заботится о добавленных радиоэлементах во время выполнения.

Разметка, которую вы генерируете в createNewRadioButton(), я думаю, не совместима с тем, что ожидает плагин.

Youсоздать:

<label><input /></label>

И плагин ожидает:

<input /><label for=''></label>

Вот модифицированная функция:

function createNewRadioButton(
        selector,
        newRadioBtnId,
        newRadioBtnName,
        newRadioBtnText){

    // create a new radio button using supplied parameters
    var newRadioBtn = $('<input />').attr({
        type: "radio", id: newRadioBtnId, name: newRadioBtnName
    });

    // create a new label and append the new radio button
    var newLabel = $('<label />').attr('for', newRadioBtnId).text(newRadioBtnText);

    // add the input then the label (and forget about the <br/>
    $(selector).append(newRadioBtn).append(newLabel).buttonset("refresh");
}

Не забудьте initiliaze плагин, даже если контейнер '#radioX' пуст:

$('#radioX').buttonset();

Я сделал jsfiddle , чтобы вы увидели рабочий пример.

Answer 2

Это должно быть ошибка.Измените версию jQuery с 1.7.1 на 1.8.3, выберите пользовательский интерфейс в jsfiddle1 , и вы увидите, что теперь он работает как положено.

code here