将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代码如下，功能正常（我使用alert只是为了检查它是否触发并传递了正确的值！）

$("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

- stretcho

Answer 1

您可以使用clone来获取选择区域内的整个表格。您可以使用"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());
});

- Jothimurugan B

Answer 2

您应该附加您的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"));
                });

- Anoop

---

太棒了！非常感谢你，现在它运行得很好/像广告一样！我自己永远不会想到解决这个问题 - 这可能对我项目的其他部分也有帮助！再次感谢。 GS - stretcho