Jquery Mobile复选框收音机在动态创建后没有应用完整的CSS

时间:2014-05-23 02:27:11

标签: jquery css jquery-mobile dynamic radio-button

我正在尝试获取一些动态创建的单选复选框,以便为其应用完整样式。

他们目前正在应用单独的单选框对象样式,但是它们缺少整个复选框样式的样式。

我使用this作为解决问题的方法,但 JQuery Mobile v1.4.2 v1.1.1 之间似乎存在差异 - 1.1.1自动应用分组样式,而1.4.2需要其他字段。

我尝试过.checkboxradio("refresh");之类的一些内容,但它们似乎都与.trigger("create");做同样的事情。

以下是我的代码段的完整版本:

HTML:

<div data-role="page" data-title="First Time" id="firstTime">
    <div class="ui-content">
        <form id="firstTimeSelectCampus">
            <fieldset data-role="controlgroup" id="firstTimeSelectCampusFieldset">
            </fieldset>
        </form>
        <p>
            You can change this under the settings menu.
        </p>
        <a href="#" id="firstTimeButton" class="ui-btn">Continue</a>
    </div>
</div>

JS:

var checked;
$("#firstTimeSelectCampusFieldset").children().remove();
$("#firstTimeSelectCampusFieldset").append("<legend>Select your default campus:</legend>");
for (var i = 0; i < campusArray.length; i++ ) {
    if (i === 0) {
        checked = ' checked="checked" ';
    }
    else {
        checked = "";
    }
    $("#firstTimeSelectCampusFieldset").append( 
        '<input ' +
        'type="radio" ' +
        'name="campus" ' +
        'id="' + campusArray[i].id + '" ' + 
        'value="' + campusArray[i].id + '" ' + 
        checked +
        '>' +
        '<label for="' + campusArray[i].id + '"' + '>' +
            campusArray[i].name +
        '</label>'
    );
};
$("#firstTime").trigger("create");

这就是我想要的样子:
What I want it to look like

目前的情况如下:
What it currently looks like

这是问题的真正最小化版本(试图摆脱不必要的一切):http://jsfiddle.net/tbLSk/

那里有很多类似的问题,但是我还没有能够让任何解决方案100%工作,所以我假设我错过了一些非常明显的问题。

1 个答案:

答案 0 :(得分:1)

你忘记了课程btn-group-vertical

<div data-role="page" id="firstTime">
    <div id="lel" class="ui-content">
        <fieldset data-role="controlgroup">
            <div id="firstTimeSelectCampusFieldset" class="btn-group-vertical" data-role="controlgroup">
            </div>
        </fieldset>
    </div>
</div>

或:

<div data-role="page" id="firstTime">
    <div id="lel" class="ui-content">
        <div  class="btn-group-vertical" data-role="controlgroup">
        <fieldset id="firstTimeSelectCampusFieldset" data-role="controlgroup">
            </fieldset>
        </div>
    </div>
</div>