jquery - JqueryMobile 单选按钮水平组无法正确呈现

Question

我正在尝试以编程方式在 JqueryMobile 中创建一组单选按钮。一切正常，除了data-type='horizontal'财产：

正如您在这个小提琴中看到的那样，“created-via-js”单选组无法正确呈现，而另一个（直接写入 HTML）效果很好。

我正在关注您可以在此页面上找到的水平组示例

这是代码：

HTML

<div id="container"></div>

JS

for (var x = 0; x < 2; x++) {
    var rowList1 = '<fieldset data-role="controlgroup" data-type="horizontal">' +
        '<legend>This does not render properly..</legend>' +
        '<input name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" type="radio">' +
        '<label for="radio-choice-h-2a">One</label>' +
        '<input name="radio-choice-h-2" id="radio-choice-h-2b" value="off" type="radio">' +
        '<label for="radio-choice-h-2b">Two</label>' +
        '<input name="radio-choice-h-2" id="radio-choice-h-2c" value="other" type="radio">' +
        '<label for="radio-choice-h-2c">Three</label>' +
        '</fieldset>';
    $("#container").append(rowList1);
}
$("input[type='radio']").checkboxradio().checkboxradio("refresh");

我究竟做错了什么？任何想法？

在此先感谢，最好的问候

Answer 1

尝试create在父容器上触发方法，而不是直接在输入上触发，例如

$('#container').trigger('create');

jsfiddle