Question

我有一个表单模板，我需要动态复制以与弹出窗口的新实例关联。我正在使用jQuery的clone（）方法来实现这一点。每当我尝试创建模板的新实例时，先前创建的表单'选项都将被删除。

示例代码： HTML：

<div id="template" class="modifyDiv">
    <div class="options">
        <label><input type="radio" class="foo" checked="checked" value="bar" name="displayMode">Foo</label>
        <label><input type="radio" class="blah" value="biz" name="displayMode">Blah</label>
    </div>
</div>

的JavaScript

popup.create = function() {
    // create popup stuff
    createViewSettings(popup);
}

createTemplate = function(popup) {
...
    var modifyDiv = $("#template").clone(true).removeAttr("id");
    modifyDiv.appendTo($(document.body));
    modifyDiv.data("popup",popup);
    popup.data("settings",modifyDiv);
... }

这是怎么回事：当我创建一个新的弹出窗口时，设置是完美的。但是当我创建第二个时，原始的“displayMode”复选框的值变为未定义。

我已经介入，似乎导致问题的路线是：

var clone = elem.cloneNode(true)

在jquery中的克隆定义中。我正在使用v1.5.1

编辑：Chrome 14.0.835.202中出现此问题，但IE8中未出现此问题编辑：当输入是单选按钮而不是复选框时，会出现此问题。

Answer 1

您的answer部分正确无误。每个<form>只能有一个具有给定名称的广播组，但您可以在页面上拥有任意数量的表单。用<div>替换其中一个包裹<form>元素应该可以解决问题：

<div id="template" class="modifyDiv">
    <form class="options">
        <label><input type="radio" class="foo" checked="checked" value="bar" name="displayMode">Foo</label>
        <label><input type="radio" class="blah" value="biz" name="displayMode">Blah</label>
    </form>
</div>

现场演示：http://fiddle.jshell.net/DfBHh/19/

Answer 2

这是一个愚蠢的问题;当您使用单选按钮克隆div时，您必须确保新div的单选按钮具有唯一名称，因为在给定页面上只能选择一个具有给定名称的单选按钮。

jQuery clone（）覆盖以前克隆的元素

2 个答案: