javascript - 克隆一个 div 但它的格式不像主 div

Question

这是我的主要 div

<div id="question-con">
                <label for="ques-code">Question Setter:</label>
                <input type="checkbox" id="ques-code" name="ques-code"/>
                <div id="question-toggle" style="display:none;">                        
                    <div id="question-div" style="background-color:#A6A6A6;width: 350px;border: 1px solid greenyellow;margin-bottom: 10px;">
                        <label>Credit</label>
                        <input type="text" name="credit" class="credit" id="credit_0">
                        <label>No of Setter</label>
                        <input type="text" name="setter">
                        <label>Type</label>
                        <input type="text" name="type" id="type">                             
                        <label for="in-ex">Internal/External</label>
                        <input type="text" name="in-ex" id="">    
                        <p class="remove" style="color:red;float: right;font-weight: bold;cursor: pointer;" >Remove</p>
                    </div>
                </div>    
                <button id="btn-question" style="margin-top: 20px;margin-right: 5px; display: none;">Add</button>
            </div>

在每次点击按钮时，都会触发下面的函数。我在这里克隆了主div，但是克隆的div 的格式与主div 不同。

$("#btn-question").click(function (e) {
                e.preventDefault();
                ++question_count;
                var question_clone = $('#question-div').clone();
                question_clone.attr('id', question_count);
                //question_clone.children().attr('id', "question_" + question_count);
                question_clone.children(".credit").attr('id', "credit_" + question_count);
                $('#question-toggle').append(question_clone);
                $("#" + question_count + " input").val("");
            });

Click here to see the image

我能做什么？

Answer 1

您需要将 true 作为参数传递给克隆以获取其格式:

$('#question-div').clone(true,true);

参见 .clone( [withDataAndEvents ] [, deepWithDataAndEvents ] ) :

withDataAndEvents

一个 bool 值，指示事件处理程序和数据是否应与元素一起复制。默认值为 false。

deepWithDataAndEvents

一个 bool 值，指示是否应复制克隆元素的所有子元素的事件处理程序和数据。默认情况下，它的值与第一个参数的值匹配(默认为 false)。

---

这只会复制应用于元素但不适用特定规则的通用类或内联样式的格式，例如如果您声明了 #someid > a 然后复制 a 元素在其他地方，例如 #otherid a 那么它将不起作用。您需要为它们显式定义 css 规则。