使用 jQuery 动态添加 HTML 单选按钮

Question

作为 jquery 的初学者，我在表单和动态元素方面遇到了一些问题。我知道这里已经有一些话题，但是我尝试了很多东西，但没有任何效果。 只是一个精度：我正在使用 Phonegap。

就是这样。我有一个表单，我必须从 BDD 添加单选按钮。我有数据，但无法在页面上显示。 这是我的表格。

<form action="form.php" method="post" id="catDec"> 
<div data-role="fieldcontain">
    <fieldset data-role="controlgroup" id="field">
        <!-- Here I want my set of radio button -->
    </fieldset>
        <br/>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <select name="selectTest" id="selectTest">
                    <option value="1">Value1</option>
                    <option value="2">Value2</option>
                    <option value="3">Value3</option>
                </select>
            </fieldset>
        </div><br/>
       <input type="checkbox" name="cbTest" id="cbTest" class="custom" />
       <label for="cbTest">Some random text</label>
    </fieldset>
</div>
<br/><br/>
<input type="submit" value="Continue" data-icon="arrow-r" ><br/>

这是我的js函数。

tableau[0]="value1";
tableau[1]="value2";
tableau[2]="value3";
tableau[3]="value4";

for (var i=1; i<tableau.length-1; i++) {
    //$("#field").append('<input type="radio" name="rb_catDec" id="'+tableau[i]+'" value="'+tableau[i]+'" checked="checked" />' );
    //$("#field").append('<label for="'+tableau[i]+'">'+tableau[i]+'</label><br/><br/>' );
    //$("#field").html('<input type="radio" name="rb_catDec" id="'+tableau[i]+'" value="'+tableau[i]+'" checked="checked" />' );
    //$("#field").html('<label for="'+tableau[i]+'">'+tableau[i]+'</label><br/><br/>' );
    $("<input type='radio' value='"+tableau[i]+"' />")
        .attr("id", tableau[i])
        .attr("name", "rb_name")
        .prependTo("field");
}
//$("#field").reload();

好吧，我已经尝试过使用 .append 和 .html 方法。有一个 div 来放置这些输入，而没有。 我想这与我在加载页面后添加这些但我找不到传递它的方法有关。

有人可以帮帮我吗？

Answer 1

尝试替换此代码：

.prependTo("field");

用这个：

.prependTo("#field");

因为，您希望将所有单选按钮添加到 ID 为 #field 的元素，而不仅仅是选择器 field。

参考：.prependTo()