Make copies of clone element in jquery

Question

I have a input which has some functionality on it. In some case I am receiving a array which contains predefined input value then I have to append that input list using that array. The the problem is only one input field is created. fiddle

    $('.row input').click(function() {
        alert(0)
    })

    var data = $('#myList').clone(true);
    $('.row').remove()

    var list = ['car', 'axe', 'gold'];
    $.each(list, function(i, val) {
        $('#myList').prepend(data.find('input').val(val))
    })

Note: Also the functionality which is attached to input is defined somewhere in another js file and I could not change it. It would break other pages

Is requirement to clone, prepend #myList element , or input element within #myList ? — guest271314
– guest271314, Commented May 1, 2015 at 6:19

Ram · Accepted Answer · 2015-05-01 08:00:54Z

3

You are cloning the #myList element. It has one input descendant. After the first iteration the cloned div doesn't have any input descendant so the next find calls return an empty collection and the prepend method effectively doesn't do anything. One option is:

var $input = $('#myList').find('input').detach();
$('.row').remove();

var list = ['car', 'axe', 'gold'];
$.each(list, function (i, val) {
    $('#myList').prepend($input.clone(true).val(val));
});

The above snippet instead of moving the input element, clones it and prepends the cloned element to the container.

edit: You can pass a collection of elements to the .prepend() method. When you pass nodes to the method it doesn't clone and prepend them, it only moves them and a node can't be a child of 2 parent elements, so using .clone() is necessary in this case. This is what happens in your original code:

var data = $('#myList').clone(true);
// ...
$.each(list, function (i, val) {
    console.log( 'index: ' + i + ', html: ' + data.html() );
    $('#myList').prepend(data.find('input').val(val))
});

Logged data:

index: 0, html: 
    <div class="row">
        <input type="text">
    </div>
    <div>
        <button>add row</button>
    </div>

index: 1, html: 
    <div class="row">

    </div>
    <div>
        <button>add row</button>
    </div>

index: 2, html: 
    <div class="row">

    </div>
    <div>
        <button>add row</button>
    </div>

As you can see after the first iteration the wrapper element no longer has any input descendant. Having 1 or many elements doesn't affect the result. In the first iteration all the input descendants returned by the find method are moved into the target element.

edited May 1, 2015 at 8:00

answered May 1, 2015 at 6:19

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jitender Over a year ago

Thanks its works. this is the code which I need $input.clone(true)

Jitender Over a year ago

"After the first iteration the cloned div doesn't have any input descendant". Can you please elaborate this.

Collectives™ on Stack Overflow

Make copies of clone element in jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related