Question

我正在尝试克隆带有“.age-sex-details”类的html div元素，以及绑定到下面显示的“.age-sex-remove”和“.age-sex-add”类的事件jquery clone函数。我能够使用.clone（true）函数克隆div，上面提到的事件和输入到输入框中的数据，但我需要克隆div元素和提到的事件，但不是克隆在“count”中输入的数据和“年龄”输入字段。这可能吗？

代码简述

下面的jQuery代码包含文档就绪函数中的两个函数。你可以忽略第一个。第二个功能是我进行克隆的地方。我克隆下面HTML中显示的div元素并将其插入其后。

iQuery代码

$(document).ready(function() {
        $(".age-sex-remove").click(function() {
            var index = $(".age-sex-details").length;
            if ( index > 1) {
                $(this).parent().remove();
                $($(".age-sex-add")[index - 2]).show();
            } else {
                console.log("only one set of age sex details, therefore clear values.")
            }
        });

        /**
         * Clone age-sex-details div including events and excluding data.
         * Hide the previous add new sex age details link.
         */
        $(".age-sex-add").click(function() {
            var index = $(".age-sex-details").length;
            console.log("Index = " +index);
            $($(".age-sex-details")[index - 1]).clone(true).insertAfter($(".age-sex-details")[index - 1]);
            $($(".age-sex-add")[index - 1]).hide();
        });
    });

HTML

<div class="form-inline age-sex-details">
    <div class="form-group">
        <label for="Count">Count</label>
        <input type="text" name="count" class="form-control" id="Count" />
    </div>    
    <div class="form-group">
        <label for="Age">Age</label>
        <input type="text" name="age" class="form-control" id="Age" />
    </div>    
    <div class="form-group">
        <label for="Sex">Sex</label>
        <select name="sex" class="form-control" id="Sex">
            <option value="0">Female</option>
            <option value="1">Male</option>
        </select>
    </div>    
    <a href="#" class="glyphicon glyphicon-remove age-sex-remove">&nbsp;</a>
    <a href="#" class="glyphicon glyphicon-plus age-sex-add">&nbsp;</a>
</div>

这是JSFiddle for the code

谢谢，优素福

Answer 1

克隆元素后，您可以在不带参数的情况下调用removeData()：

var cloneWithEventsOnly = $("selector").clone(true).removeData();

编辑：您希望清除表单控件值（根据clone()的{{3}}不应该首先复制它们，但显然是）。

在这种情况下，您可以将表单控件与documentation选择器匹配，并使用:input清除其值：

var cloneWithoutValues = $("selector").clone(true).find(":input").val("").end();

或者，在您的特定情况下：

var source = $(".age-sex-details").eq(index - 1);
source.clone(true).find(":input").val("").end().insertAfter(source);

Answer 2

 var data = $($(".age-sex-details")[index - 1]).clone(true);
 $(data).find(':input').val("");;
 $(datal).insertAfter($(".age-sex-details")[index - 1]);

如何在jQuery中克隆除数据之外的元素事件？

代码简述

iQuery代码

HTML

2 个答案: