Как правильно клонировать элементы?

Question

[Артем Грибков]

На странице есть блок с инпутами, на некоторые инпуты привязаны события (jqueryui datepicker к примеру). Необходимо по нажатию на кнопку "Добавить блок" добавлять еще один под ним и так до бесконечности.

Реализую следующим образом:

appendTaskContainer : function() {

            return this
                .on({
                    'click': function()
                    {
                        var stageContainer = $(this).parents('.stage_container');
                        var taskContainer = stageContainer.find('.task_container:last');

                        taskContainer.clone().appendTo(stageContainer);
                    }
                });

        },

Проблема в том, что при таком клонировании, на добавленные элементы не будет реагировать js. Так вот как правильно реализовать клонирование элементов, не прибегая к добавлению html кода напрямую из js (по типу: a.append(""))?

Comments

[Артем Грибков]

UPD: проблема частично решена, если в clone() передать true, то все идет шикарно, но теперь на странице несколько блоков, внутри которых есть jquery ui datepicker, так вот по нажатию на любой из них срабатывает только первый.

Answer 1

[Юрий Лобанов]

jsfiddle.net/35fBQ/2
Теперь точно будет работать )

Comments

[Юрий Лобанов]

посмотрите внимательно API, может то, что я сделал можно сделать с помощью его. Я найти не смог.

[Артем Грибков]

Действительно, все работает, спасибо :)

Answer 2

[Alexander Devid]

несколько блоков, внутри которых есть jquery ui datepicker, так вот по нажатию на любой из них срабатывает только первый.

можт нужно
$('.datepicker').each(function(){
$(this).datepicker();
});

Answer 3

[Юрий Лобанов]

Вы просто неправильно вызываете datepicker, напишите, как Вы его вызываете и подскажем, как исправить. Скорее всего вариант @alexdevid правильный.

Comments

[Артем Грибков]

Ммм, не совсем понял? Вызываю просто добавлением к нужному инпуту класса .datepicker

[Юрий Лобанов]

@L1Qu0R добавьте код от @alexdevid

Answer 4

[Юрий Лобанов]

jsfiddle.net/35fBQ/1
Вообще все работает, странно, почему у Вас только первый срабатывает

Comments

[Артем Грибков]

Потому что у вас тут сразу есть 2 элемента, а я клонирую один множественно и судя по всему им jqueryui присваивает один и тот же id datepicker'а

Answer 5

[Юрий Лобанов]

При каждом клонировании попробуйте добавлять datepicker. Примерно так:

var taskContClone = taskContainer.clone().appendTo(stageContainer);
taskContClone.find('.datepicker').datepicker();

По идее он должен переназначать id datepicker'a

Comments

[Артем Грибков]

Увы безрезультатно