CODEWITHSUNDEEP
javascriptphpjqueryhtml
user2772219
user2772219

Reputation: 129

Clone elements but they must have "unique properties"

Demo

Here's my setup so far:

I can preview the message for the intended recipient. However, I need the functionality to dynamically add more recipients. I pretty much have the basic functionality of that done.

Problem #1: My problem is whenever I add a new recipient, the keyup no longer works for the subsequent fields.

Problem #2: Also, how do I clear the fields before I clone the first div? Or do I use a different method and not use .clone()?

Problem #3: Lastly, how do I make each field unique? Notice in my script file and the classes I used, they are all the same so whatever I input in the first field will copied to ALL previews.

Demo

Upvotes: 2

Views: 64

Answers (4)

Arun P Johny
Arun P Johny

Reputation: 388326

event delegation

$(document).on('keyup', '.name', function (e) {
    var input = $(this).val().replace(/[\n]/g, '<br />');
    $(this).closest('.sub_container').find('.preview_name').html(input);
});
$(document).on('keyup', '.message', function (e) {
    var input = $(this).val().replace(/[\n]/g, '<br />');
    $(this).closest('.sub_container').find('.preview_message').html(input);
});


$(document).on('click', '.add_new', function (e) {
    //var container = $('.sub_container').html();
    //$('.container').append(container);
    $('.sub_container').first().clone().appendTo('.container').find(':input').val('');
});

Demo: Fiddle

Upvotes: 1

w3bMak3r
w3bMak3r

Reputation: 892

If you add a parent().parent() it will only update the preview area next to form elements you are currently editing:

http://jsfiddle.net/Z8MyX/3/

$('.name').keyup(function(e) {
        var input = $(this).val().replace(/[\n]/g,'<br />');
        $('.preview_name').html(input);
    });

    $('.message').keyup(function(e) {
        var input = $(this).val().replace(/[\n]/g,'<br />');
        $(this).parent().parent().find('.preview_message').html(input);
    });

    $('.add_new').click(function(e) {
        //var container = $('.sub_container').html();
        //$('.container').append(container);
        $('.sub_container').first().clone(true).appendTo('.container');
    });

Upvotes: 1

Anton
Anton

Reputation: 32581

Firstly you must use on() event delegation so keyup works on dynamic elements and to type on it's unique text you must find the sub_container using .closest()

$(document).on('keyup', '.name', function (e) {
    var input = $(this).val().replace(/[\n]/g, '<br />');
    $(this).closest('.sub_container').find('.preview_name').html(input);
});
$(document).on('keyup', '.message', function (e) {
    var input = $(this).val().replace(/[\n]/g, '<br />');
    $(this).closest('.sub_container').find('.preview_message').html(input);
});
$('.add_new').click(function (e) {
    //var container = $('.sub_container').html();
    //$('.container').append(container);
    $('.sub_container').first().clone().appendTo('.container').find('input').val('');
    $('.preview_message').last().html('');
    $('.preview_name').last().html('');
});

DEMO

Upvotes: 2

Patsy Issa
Patsy Issa

Reputation: 11293

You just need to add .clone(true) to clone the event listeners attached to the element.

$('.add_new').click(function(e) {
        //var container = $('.sub_container').html();
        //$('.container').append(container);
        $('.sub_container').first().clone().appendTo('.container');
});

Becomes 

$('.add_new').click(function(e) {
        //var container = $('.sub_container').html();
        //$('.container').append(container);
        $('.sub_container').first().clone(true).appendTo('.container');
    });

Updated Fiddle.

.clone() docs.

Upvotes: 1

Related Questions