动态添加单选按钮

Question

i am having some serious issue with jquery mobile am build a learning reponse system.Now i want to dynamically populate the question page each time there is a question to be answered. so far i have been able to do all that but currently my radio button are refusing to follow the normal jquery order when i call them dynamically. When i call the dynamically the design disrupts but when i hard code it i get exactly what am expecting. the image below is an example of wat am trying to explain. the upper distorted radio buttons are the dynamic ones the lower 2 are the hard coded ones.

this is the code i used:

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);                      
            }

Please this is my html am sorry but am not realy good with the fiddle thats why i didnt post there.

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

Any help or contribution at all would grateful.Thanks

Answer 1

After testing your code and putting in the default string of values and also adding in the value to the dynamically created radio I can confirm it's working fine. I would imagine your issue is that there is problem with the main part of your HTML. But as you haven't added it, i can't confirm it.

Here's your javascript code:

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);
}

And the HTML is used:

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

And finally, a working Fiddle - http://jsfiddle.net/andyjh07/tw0k5qkc/

Answer 2

For jQuery Mobile, after adding controls dynamically you need to initialize the widgets or call refresh on them so they apply the jQM classes. For your case, you can simplify the HTML:

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

Then in the script. you need to add a name to the radio buttons so that checking one unchecks the others. Also add an id and in the label a for that points at the associated id. Finally, after all appending is done, call enhanceWithin() on the div to initialize the checkboxradio widgets and then tell the controlgroup fieldset to refresh itself.

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