CODEWITHSUNDEEP
javascriptjqueryclone
Alexandre R. Janini
Alexandre R. Janini

Reputation: 497

Change property of cloned element before appending

I'm cloning a "template" DIV with jQuery and appending a modified version to another DIV.

The problem is that the changes I make to the clone, do not show up when I append it to the destination.

var $clone = $('div[data-id="5"]').clone();

console.log($clone.data('id')); // outputs '5'

$clone.data('id', 99);

console.log($clone.data('id')); // outputs '99'

$clone.appendTo($('#target')); // resulting cloned element has data-id of '5'! Whaa...?

Here's a fiddle to make it clearer: http://jsfiddle.net/ajanini/rcxd4v3b/1/ (inspect the element to see that the data-id is unchanged)

Question is: what am I doing wrong? How do I change the data-id of the clone and keep the change when I append it to the destination?

Upvotes: 0

Views: 3865

Answers (3)

Feras Elsharif
Feras Elsharif

Reputation: 1

<div class="row session-sub-to-clone" >
    <div class="col-md-5 col-xs-12">
        <div class="form-group custom-form-group">
            <label for="parties">المشاركون</label>
            <select class="form-control" id="parties" name="participant_user_id[]">
                <option value="">المشاركون</option>
                <option value="">المشاركون</option>
                <option value="">المشاركون</option>
                <option value="">المشاركون</option>
            
            </select>
        </div>
    </div>
    <div class="col-md-5 col-xs-12">
        <div class="form-group custom-form-group">
            <label for="parties-title">عنوان المشاركة</label>
            <input type="text" class="form-control" id="partise-title" name="participant_title[]" value="" required>
            <input type="hidden" value="0" name="participant_id[]">
        </div>
    </div>
    <div class="col-md-2 col-xs-12">
        <button type="button" class="btn add-partise-btn" id="addRow"><i
                    class="fa fa-plus"></i></button>
    </div>
</div>
<div id="new-rows"></div>

The code above is a part of a HTML FORM I would like to clone it and replace this #addRow button after it has been cloned and before it is appended to the form :) ...nice!

This is my code:

$("#addRow").click(function () {
    var html = '<div class="col-md-2 col-xs-12" style="margin-right: 37%;">'
    html += '<button type="button" class="btn remove-parties-btn" id="removeRow"><i class="fa fa-times"></i></button>'
    html += '</div>'

    var clonedElement = $('.session-sub-to-clone').clone();

    clonedElement.find('#addRow').replaceWith(html);
    clonedElement.attr('id','inputFormRow')
    $('#new-rows').append(clonedElement);
});

// remove row
$(document).on('click', '#removeRow', function () {
    console.log('test');
    $(this).closest('#inputFormRow').remove();
});

1)This HTML element "remove-btn" that i want to replace with #addRow button:

var html = '<div class="col-md-2 col-xs-12" style="margin-right: 37%;">'
html += '<button type="button" class="btn remove-partic-btn" id="removeRow"><i class="fa fa-times"></i></button>'
html += '</div>'

2)Element cloning:

var clonedElement = $('.session-sub-to-clone').clone();

3)Change and add to clonedElement:

clonedElement.find('#addRow').replaceWith(html);
clonedElement.attr('id','inputFormRow');

4)Append clonedElement to Form:

$('#new-rows').append(clonedElement);

Best Wishes

                     -----------

Upvotes: 0

Malk
Malk

Reputation: 11983

HTML data- (dataset) does not equal jQuery's $().data. Notice when you inspect a cloned element in chrome: ($0 = selected element)

$0.dataset.id   // 5
$($0).data('id') // 99

So they are separate entities, and it can get pretty confusing. You should try not to mix them.

BTW you can set the HTML markup with either $(el).attr('data-id', id) or with $(el)[0].dataset.id = id.

Upvotes: 1

Tyler Peryea
Tyler Peryea

Reputation: 543

I'd use this attr for setting attributes. Seems to work for me.

$clone.attr("data-id",99);

http://jsfiddle.net/rcxd4v3b/2/

Upvotes: 3

Related Questions