Question

我正在动态添加单选按钮，如下所示。由于某些原因，未应用样式。

的Javascript / jQuery的：

        jQuery.fn.extend({
    CE2: function (name, state, id)
    {

        var choices = ["P", "L", "A"];
        var nameLabel = document.createElement('label');
        nameLabel.innerHTML=name;
        document.getElementById('subregister').appendChild(nameLabel);
        for (var i = 0; i <= 2; i++) {
             var fieldset = $('<fieldset data-role="controlgroup">');
            //fieldset.append( $('<legend>').html(name) );
            fieldset.append( $('<input type="radio" />').attr('name', id).attr('value', choices[i]).attr('id', id+choices[i]) );
            fieldset.append( $('<label>').attr('for', choices[i]).html(choices[i]) );
            fieldset.append('</fieldset>');
            // Radio buttons
            $('#subregister').append(fieldset);

        }
            // Set absent as default
            document.getElementById(id+state).checked = true;
    }

}）;

HTML：

<body> 
<div data-role="page">
    <div data-role="content" id="subregister">



    </div>
</div>

我查看了类似的问题并尝试了所有建议的选项，但我无法让它发挥作用。例如，我尝试使用.trigger("create")和$("input[type='radio']").checkboxradio().checkboxradio("refresh");，但它无效。我有什么想法吗？

Answer 1

我意识到我的for循环都错了。我已经用“艰难的方式”重新编写了这篇文章＆＃39;使用信息here。

这可以作为选择＆＃39;是短暂而静止的。我很想知道如何动态地做这个...我得到了错误的循环（创建多个字段集等）。如果有人有更好的解决方案（更灵活/更有活力），我很乐意看到它。

jQuery.fn.extend({
    CE2: function (name, state, id)
    {
        var choices = ["P", "L", "A"];
        var $radios1 = $('<fieldset data-role="controlgroup" data-type="horizontal"></fieldset>')
                        .append(
                            $('<legend>' + name + '</legend>'),
                            $('<input />')
                                .attr({
                                    'type':'radio',
                                    'name': id,
                                    'id': id+"P",
                                    'value': 'P'
                                }),
                            $('<label />')
                                .attr({
                                    'for': id+"P"
                                }).text("P"),
                            $('<input />')
                                .attr({
                                    'type':'radio',
                                    'name': id,
                                    'id': id+"A",
                                    'value': 'A'
                                }),
                            $('<label />')
                                .attr({
                                    'for': id+"A"
                                }).text("A"),
                            $('<input />')
                                .attr({
                                    'type':'radio',
                                    'name': id,
                                    'id': id+"L",
                                    'value': 'L'
                                }),
                            $('<label />')
                                .attr({
                                    'for': id+"L"
                                }).text("L")
                        );
        $('#subregister').append($radios1).trigger('create');   

    document.getElementById(id+state).checked = true;
    $("input[type='radio']").checkboxradio().checkboxradio("refresh");
    }

}）;

Answer 2

这个工作用静态列表，但动态列表？嗯，这是我的问题，然后我们这样做了。使用jquery mobile而不丢失样式。

<html>
<form>
 <input type='text'>
 <!-- local to put my radios buttons -->
<div id='myDiv'>
 <!-- the radio button space -->
</div>
</form>
</html>


<script>
//indicate one div to insert radios
var divExist = $("div#myDiv");

//store all radios buttons
var radios="";

//mount the all tags
var changes = "";

//local where has one list
url = 'path/to/list/json';

$.getJSON( url, function (data) {

   //loop to get each data from the list and create the radio 
    $.each(data, function (key, value) {

        radios = radios + "<input type='radio' name='radio-choice-1' id='option-"+value.id+"' value='anyvalue'><label for='option-"+value.id+"'>"+value.id+"</label>";
}

//after mount all radios, put inside fieldset
changes = '<fieldset id="listagem" data-role="controlgroup" data-mini="true"> <legend class="label">Invoices</legend>'+radios+'</fieldset>';

//after put together, add on div with create
divExist.prepend(changes).trigger('create');
});
</script>

jquery mobile - 动态添加单选按钮会失去样式

2 个答案: