jQuery 按钮集刷新没有像我预期的那样工作答案

【问题标题】：jQuery buttonset refresh not working as I'd expectedjQuery 按钮集刷新没有像我预期的那样工作
【发布时间】：2012-01-07 13:33:29
【问题描述】：

好的 - 我有一个函数，我调用它来动态添加一个单选按钮as per this 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' 中已包含的单选按钮下方添加另一个单选按钮（假设有一个 id 为 radioX 的 div 包含单选按钮):

            // 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();，为什么函数 createNewRadioButton 中对 $("#radioX").buttonset("refresh") 的调用不刷新列表单选按钮？

调用 createNewRadioButton 后我看到的结果是添加了一个带有所需文本的新标签，但没有新的单选按钮。因此，我看到的不是一个漂亮的新 jQuery 单选按钮，而是一个新标签，其文本等同于 product.Name（在给定的示例中）。

在调用 createNewRadioButton 后，我还注意到 firebug 中的此警告输出 - 这与它有什么关系吗？

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

编辑

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

Here's a screenshot of what happens

【问题讨论】：

refresh 方法刷新按钮的状态（如果以编程方式更改了值），它不会重新创建按钮集（doc）
啊！好的 - 所以如果我想重新创建按钮集，我需要销毁它然后重新创建它？
其实refresh有效，看看我的回答

标签： javascript jquery jquery-ui refresh jquery-ui-button

【解决方案1】：

我的错。实际上refresh 方法在运行时很好地处理了添加的无线电元素。

我认为您在 createNewRadioButton() 中生成的标记与插件的预期不兼容。

你创造：

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

不要忘记初始化插件，即使容器“#radioX”是空的：

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

我制作了一个jsfiddle 供您查看工作示例。

【讨论】：

太棒了，这正是我所需要的！干杯。

【解决方案2】：

这一定是一个错误。将 jQuery 版本从 1.7.1 更改为 1.8.3，在 jsfiddle1 中选择 UI，您会看到它现在按预期工作。

code here

【讨论】：