动态添加单选按钮

Question

我在使用 jquery 移动设备时遇到一些严重问题，我正在构建一个学习响应 system.Now 我想在每次有问题需要回答时动态填充问题页面。到目前为止，我已经能够做到所有这些，但目前我的单选按钮在我动态调用它们时拒绝遵循正常的 jquery 顺序。当我动态调用时，设计会中断，但是当我对其进行硬编码时，我得到的正是我所期望的。下图是我试图解释的示例。上面扭曲的单选按钮是动态的，下面的 2 个是硬编码的。

这是我使用的代码：

var possibleAnswers=poss_ans.split(",");//poss_ans is string containing all the answer from the database


        for (var i =0; i < possibleAnswers.length; i++) {

                var label = sp[i];
                   $radio = $('<input />', { type: "radio" }); 
                   var $label = $('<label />', { text: label});
                   var wrapper = $('<div />');
                   wrapper.append($label).append($radio);;

                    $('div#poss_ans').append(wrapper);                      
            }

这是我的 html 很抱歉，但我对 fiddle 不是很满意，这就是为什么我没有 post 的原因。

    <fieldset class="ui-grid-b">
            <h1 id="title">H1 Heading</h1>
            <p id="question">The question</p>


            <div data-role="fieldcontain">
            <fieldset  data-role="controlgroup">
                <div id="poss_ans"></div>


                    <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
                    <label for="radio-choice-2">6</label>

                    <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
                    <label for="radio-choice-3">4</label>
                    <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
                    <label for="radio-choice-3">8</label><input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
                    <label for="radio-choice-3">2</label>


            </fieldset>
        </div>
        </div>

任何帮助或贡献都会 grateful.Thanks

Answer 1

在测试您的代码并放入默认值字符串并将值添加到动态创建的无线电之后，我可以确认它工作正常。我想你的问题是 HTML 的主要部分有问题。但是你没有添加，我无法确认。

这是您的 javascript 代码：

var poss_ans = "6,4,8,2";
var possibleAnswers = poss_ans.split(","); //poss_ans is string containing all the answer from the database

for (var i = 0; i < possibleAnswers.length; i++) {

    var label = possibleAnswers[i];
    $radio = $('<input />', {
        type: "radio",
        value: possibleAnswers[i],
    });
    var $label = $('<label />', {
        text: label
    });
    var wrapper = $('<div />');
    wrapper.append($label).append($radio);

    $('div#poss_ans').append(wrapper);
}

并且HTML被使用：

<div id="poss_ans"></div>

最后，一个有效的 Fiddle - http://jsfiddle.net/andyjh07/tw0k5qkc/

Answer 2

对于 jQuery 移动版，动态添加控件后，您需要初始化小部件或对其调用刷新，以便它们应用 jQM 类。对于您的情况，您可以简化 HTML:

<h1 id="title">H1 Heading</h1>
<p id="question">The question</p>
<fieldset  data-role="controlgroup">
    <div id="poss_ans" ></div>
</fieldset>

然后在脚本中。您需要为单选按钮添加一个名称，以便选中一个可以取消选中其他按钮。还要添加一个 id 并在标签 a 中指向关联的 id。最后，在完成所有追加后，调用 div 上的 enhanceWithin() 来初始化复选框单选小部件，然后告诉控制组字段集自行刷新。

var $posans = $('#poss_ans');    
for (var i = 0; i < possibleAnswers.length; i++) {
    var label = possibleAnswers[i];
    $radio = $('<input />', {
        id: 'rad' + i,
        name: 'possibleAnswers',
        type: "radio",
        value: possibleAnswers[i],
    });
    var $label = $('<label />', {
        for: 'rad' + i,
        text: label
    });

    $posans.append($label).append($radio);
}     
$posans.enhanceWithin().closest("fieldset").controlgroup("refresh");

DEMO

动态添加单选按钮

Add radio buttons dynamically

javascript

jquery

jquery-mobile