動態添加單選按鈕

Question

我在使用jquery mobile時遇到一些嚴重問題，正在構建一個學習響應系統。現在，我想在每次有問題要回答時動態填充問題頁面。 到目前為止，我已經能夠執行所有操作，但是當前我的單選按鈕在我動態調用它們時拒絕遵循正常的jquery順序。 當我動態調用時，設計就中斷了，但是當我進行硬編碼時，我得到的正是預期的結果。 下圖是wat試圖解釋的示例。 上方失真的單選按鈕是動態按鈕，下方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，對不起，但不是很好，這就是為什么我沒有張貼在那里。

    <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>

任何幫助或貢獻都將不勝感激。

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>

最后，一個有效的小提琴-http: //jsfiddle.net/andyjh07/tw0k5qkc/

Answer 2

對於jQuery Mobile，在動態添加控件之后，您需要初始化小部件或對其調用刷新，以便它們應用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（）來初始化checkboxradio小部件，然后告訴控件組字段集刷新自身。

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