将 DIV 多次附加到 DIV - 如果重复则不会出现

Question

多年来，通过阅读各种帖子从该网站获得了很多帮助，但我有点卡在这个帖子上，似乎找不到答案：

我正在显示/替换一个下拉列表，该下拉列表取决于所选“表格”的类型（通过单选按钮）

一切都很好...直到我尝试显示之前显示的列表...即当我两次单击单选按钮时，我无法让它重新显示列表。我还尝试将所有 DIV HTML 加载到一个数组中并调用它，所以它必须（？）与追加有关？

这是我正在使用的 HTML。 （HTML 中的 'max@times' 是我用动态生成的内容替换列表的地方 - 并一次性创建所有各种下拉列表，并且不会不断地从服务器获取它们）

<div id="selectarea"></div>
<div id="tables">
 <div id="tables2"><p><select id="select2" class="tables" name="tables2"><option value="">Please Select</option>" & max2times & "</select></p></div>"
 <div id="tables4"><p><select id="select4" class="tables" name="tables4"><option value="">Please Select</option>" & max4times & "</select></p></div>"
 <div id="tables6"><p><select id="select6" class="tables" name="tables6"><option value="">Please Select</option>" & max6times & "</select></p></div>"
 <div id="tables8"><p><select id="select8" class="tables" name="tables8"><option value="">Please Select</option>" & max8times & "</select></p></div>"
 <div id="continue"><p style="text-align:center;"><input type="button" id="now" value="Continue" name="now"></p></div>
</div>

我的 JQuery 看起来像这样并且功能正常（我使用警报只是为了检查它是否正在触发并且传递了正确的值！）

$("input:radio[name=tabletype]").live("click",function() {
                var value = $(this).val();
                alert("Button Click " + value);
                $("#selectarea").html("");
                var tblSel = $("#tables"+value);
                $("#selectarea").append(tblSel);
                });

任何帮助/想法将不胜感激！！！

谢谢，

GS

Answer 1

您可以使用克隆来获取选择区域内的整个表格。您可以使用“html()”而不是清空该区域并附加内容。

$("input:radio[name=tabletype]").live("click",function() {
    var value = $(this).val();
    var tblSel = $("#tables"+value);
    $("#selectarea").html(tblSel.clone().removeAttr("id"));
});

如果您只想在区域内复制内容，请使用“html()”本身，如下所示。它将确保 div 将具有唯一的 ID，即您无需从复制的内容中删除 ID。

$("input:radio[name=tabletype]").live("click",function() {
    var value = $(this).val();
    var tblSel = $("#tables"+value);
    $("#selectarea").html(tblSel.html());
});

Answer 2

您应该附加您的div 的克隆。否则将附加相同的元素引用，因此将创建新的 div。

$("input:radio[name=tabletype]").live("click",function() {
                  var value = $(this).val();
                     alert("Button Click " + value);
                      $("#selectarea").html("");
                     var tblSel = $("#tables"+value);
                     $("#selectarea").append(tblSel.clone(true).removeAttr("id"));
                });