jQuery按钮组刷新不能像我预期的那样工作

时间:2011-11-27 23:29:50

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

好的 - 我有一个函数可以动态添加一个单选按钮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'中已经包含的单选按钮下面添加另一个单选按钮(假设有一个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单选按钮,而是位于已经存在的任何内容之下,我只看到一个新的标签,其中包含与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

2 个答案:

答案 0 :(得分: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");
}


不要忘记 initiliaze 插件,即使容器'#radioX'为空:

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


我已经为jsfiddle做了一个有用的例子。

答案 1 :(得分:-1)

一定是个bug。将jQuery版本从1.7.1更改为1.8.3,在jsfiddle1中选择UI,您将看到它现在正在按预期工作。

code here