动态内容仅部分在JQuery Mobile / Phonegap中设置样式

Question

我有一个JQuery Mobile / Phonegap应用程序。在动态插入html表单元素后，我在包含元素上调用.trigger('create')，如下所示：

$('div#response-form').append(formHtmlString).trigger('create');

所有元素的样式都正确，但单选按钮和复选框除外，这些按钮和复选框仅部分样式且未正确对齐。见下图：

我到底在做什么？

谢谢！

修改

这是formHTMLString变量中包含的HTML代码：

<form data-response_id="API1201344135246">
<div data-page="1">
    <h3>Page One</h3>
</div>
<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Question - Checkbox*</legend>
        <input type="checkbox" name="10010" id="10010" value="One"  class="custom" />
        <label for="10010">One</label>
        <input type="checkbox" name="10011" id="10011" value="Two"  class="custom" />
        <label for="10011">Two</label>
        <input type="checkbox" name="10012" id="10012" value="Three"  class="custom" />
        <label for="10012">Three</label>
    </fieldset>
</div>
<div data-role="fieldcontain">
    <label for="2">Question - String*</label>
    <input type="text" name="2" id="2" value="" />
</div>
<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Question - Radio Button</legend>
        <input type="radio" name="6" id="10004" value="Yes"  />
        <label for="10004">Yes</label>
        <input type="radio" name="6" id="10005" value="No"  />
        <label for="10005">No</label>
        <input type="radio" name="6" id="10006" value="Maybe"  />
        <label for="10006">Maybe</label>
    </fieldset>
</div>

....

</form>

Answer 1

<强>更新

如果您想使用自定义主题/样式，请加载jQuery-Mobile默认CSS并覆盖其“样式”。

---

使用.checkboxradio()和.trigger('create')动态增强复选框和单选按钮的标记。

复选框：

$('input[type=checkbox]').checkboxradio().trigger('create');

单选按钮：

$('input[type=radio]').checkboxradio().trigger('create');

  

<强> Demo