Как сохранить (или повторно применить) привязки jQuery к новым элементам после использования jQuery "clone()"?

Question

У меня есть форма, с помощью которой я использую jQuery ".clone()", чтобы добавить новые строки. Все выглядит великолепно, однако у меня есть проблема с привязкой. По сути, при инициализации я использую функцию jQuery ".datepicker()" для одного поля (в зависимости от класса). Если я использую ".clone ()" сам по себе, я не получаю никакой функциональности ".datepicker ()" с новым элементом. Если я использую ".clone (true)", я получаю функциональность, но для клонированных строк он заполняет дату строки, из которой он был клонирован, а не фактическую нажатую строку.

Я пытался отменить привязку, но ничего из этого не работает. Итак, как мне добавить новые строки в форму, при этом все функции JQuery работать правильно?

Лучший

РЕДАКТИРОВАТЬ 1 (JQuery):

function addLineItem () {
    $('# charge_table tr:last').clone(true).insertAfter('#charge_table tr:last');
}

$(Функция (){
    $('.date_pick').datepicker({"numberOfMonths": 2});
    $("# Add_line_item"). Bind ('щелчок', функция (событие){
        event.preventDefault();
        addLineItem();
        $('Date_pick ') DatePicker (' уничтожить').
        $('Date_pick') DatePicker ().
    })
})

К вашему сведению, я привязываю только к классу, а элементы HTML не используют идентификатор, чтобы говорить о.

Answer 1

Когда ты .clone()Вы меняете идентификатор элемента, прежде чем вставить его обратно в DOM? Если нет, ваш идентификатор будет дублирован, и это может стать причиной вашей проблемы.

Answer 2

Во-первых, как написано, ваш метод addLineItem всегда собирается клонировать, какой бы ни была последняя строка таблицы: $('#charges_table tr:last'), Похоже, вы хотите клонировать строку таблицы, в которой произошел щелчок. Если это так, то что-то вроде этого должно сработать:

function addLineItem(row){
    $(row).clone(true).insertAfter('#charges_table tr:last');
}

$(function(){
    $('.date_pick').datepicker({"numberOfMonths": 2});
    $("#add_line_item").bind('click',function(event){
        event.preventDefault();
        // Pass the closest 'tr' element to the element clicked.
        addLineItem($(this).closest('tr'));
    });
});

Я не тестировал этот код, но он основан на аналогичном коде клонирования строк таблицы в одном из моих проектов.