Question

我在这里有一个字段集：

<fieldset class="pollQuestion" id="pq1">
    <legend id="legend">Q&A</legend>
    <ul>
        <li>
            <input type="text" id="formheader" value="Question 1""></input>
        </li>
        <li>
            <input type="button" class="addQuestion" value="Add Question" />
            <input type="button" class="delQuestion" value="Remove Question" />
        </li>
        <label>Answers</label>
        <li id="answerFields">
            <input type="text" id="formanswer1" value="" />
        </li>
        <li>
            <input type="button" class="addAnswer" value="Add Answer" />
            <input type="button" class="delAnswer" value="Remove Answer" />
        </li>
    </ul>
</fieldset>

我想克隆（）这个因为我可能用数组内容填充它，或者我可能根本不填写它。我想要一个像：

这样的功能

$(document).ready(function () {
    window.clone = $('#pq1').clone();
});

但由于某些原因我无法让它工作

我有一个例子小提琴here。

Answer 1

你有两个拼写错误：

window.clone = "$('#pq1').clone()"; //remove quotes

$('$clone').attr('id', 'pq'+newNum); 应为 $clone.attr('id', 'pq'+newNum);

更新了fiddle

Answer 2

这将只创建一个您尝试多次追加的克隆。

但除此之外，在你的小提琴中，你把它放在一个字符串window.clone = "$('#pq1').clone()"

中

然后在运行$clone = window.clone之后你尝试在jQuery对象$("$clone")中使用它......有些东西告诉我你不知道你在做什么......

Here是更新的小提琴。我已设法挽救它，以便您可以创建新问题，但由于您尝试访问不存在的#btnDel，因此无法将其删除。祝你好运......

Answer 3

$(document).ready(function () {
   $(".pollQuestion").clone().appendTo("#legend");
});

如果这是你想要的话！

Answer 4

要克隆元素，您可以执行以下操作：

$(document).ready(function () {
    var $clone = $('#pq1').clone();
}

然后，在您的click事件中，使用该$ clone对象（不要再声明它）。在将其附加到DOM之前，它不会显示。

Answer 5

试试这个：

$(document).ready(function () {
    //store in a local variable to document.ready so as not to pollute the global namespace
    var myClone = $('#pq1').clone();
    // move into document.ready so it has access to the local variable.
    $('.addQuestion').live('click', function () {
        var num = $("#pollContent fieldset.pollQuestion").length;
        var newNum = new Number(num + 1); // the numeric ID of the new input field being added
        // return a clone of the original cloned object.
        var $clone = myClone.clone();
        //remove the quotes from $clone as you want to pass the jQuery constructor a jQuery object, not a selector string.
        $($clone).attr('id', 'pq' + newNum);
        //update the question in the text box for visual confirmation that this is working.
        $($clone).find('#formheader').val('Question ' + newNum);
        // insert the new element after the last "duplicatable" input field
        $('#pq' + num).after($clone);
        // enable the "remove" button
        $('#btnDel').attr('disabled', '');
    });
});

，当然还有an updated fiddle。

如何克隆字段集而不将其显示给用户？

5 个答案: