jQuery clone () перезаписывает ранее клонированные элементы

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

Ваш ответ был частично верным.У вас может быть только одна радиогруппа с заданным именем на <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 есть уникальное имя, потому что только одна радио-кнопка с данным именем может быть выбрана на данной странице.