jQuery buttonset refresh not working as I'd expected

Question

OK - I have a function which I call to dynamically add a radio button as per this question. This is the full function:

    // 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");
    }

So if I were to call the above function with the following code I would expect another radio button to be added underneath the radio buttons already contained in the div '#radioX' (assuming there is a div with id radioX containing radio buttons):

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

Given that on document ready, I tell jQuery to create me a buttonset out of the radio buttons contained in #radioX like so: $( "#radioX" ).buttonset();, why doesn't the call to $("#radioX").buttonset("refresh") in the function createNewRadioButton refresh the list of radio buttons?

The result that I see after a call to createNewRadioButton is made is a new label with the desired text is added but no new radio button. So instead of a nice new jQuery radio button sitting underneath whatever was already there, I see just a new label with text equivelant to product.Name (in the given example).

I've also noticed this warning output in firebug after a call is made to createNewRadioButton - could this have anything to do with it?

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

EDIT

Here's a screenshot of what I expected to happen:

Here's a screenshot of what happens

Answer 1

My mistake. Actually the refresh method is taking good care of added radio elements at runtime.

The markup you are generating in createNewRadioButton() is I think not compatible with what the plugin expects.

You create:

<label><input /></label>

And the plugin expects:

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

Here is the modified function:

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");
}

Don't forget to initiliaze the plugin, even if the container '#radioX' is empty:

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

I have made a jsfiddle for you to see a working example.

Answer 2

It must be a bug. Change jQuery version from 1.7.1 to 1.8.3, choose UI in jsfiddle1 and you will see that it is now working as expected.

code here