克隆div但它的格式不像主div

时间:2016-03-02 04:44:15

标签: javascript jquery html css

这是我的主要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

我该怎么办?

1 个答案:

答案 0 :(得分:1)

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

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

请参阅.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

withDataAndEvents

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

deepWithDataAndEvents

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

这只会复制应用于元素的公共类或内联样式的格式,而不会复制特定规则,例如,如果您声明了#someid > a,那么将a元素复制到其他位置,例如#otherid a然后它将无效。您需要为它们明确定义css规则。