Как связать события элементов клона, исключая данные в jQuery?

Question

Я пытаюсь клонировать элемент html div с классом ".age-sex-detailes", и события, связанные с классами «A.age-Sex-Remove» и «.age-Sex-Добавить», показанные ниже, используя jQuery Клон Функция. Я могу клонировать div, события, упомянутые выше, и данные введены в входные поля с использованием функции .Clone (True), но мне нужно клонировать элемент div и указанные события, но не данные, введенные в «счетчике» и «возраст» входных полей. Это возможно?

Краткое описание кода

Код jQuery ниже состоит из двух функций в документе готовой функции. Вы можете игнорировать первый. Вторая функция - это то, где я делаю клонирование. Я клонирую элемент div, показанный в HTML ниже и вставьте его после себя.

код 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>

.

Вот a jsfiddle для кода

Спасибо, YUSUF

Answer 1

Вы можете позвонить hotellaTa () без аргументов после клонирования элемента:

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

.

Редактировать: Похоже, вы хотите очистить значения управления форм (которые не должны быть скопированы в первую очередь в соответствии с генеракодицетагкодом Документация , но, видимо, есть).

В этом случае вы можете сопоставить элементы управления формой с помощью : вход селектор и очистить ихЗначения с val () :

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]);

.