jQuery dynamic select and clone div

Question

I have a <select id='group1'> drop down that populates a <textarea id='group2'> using

$('#group1').on('change', function(event) {
        $.post('get_data.php', {sent_id: form1.group1.value },
        function(bounced) {
           var valNew = bounced.split(',');
            $('#group2').html(valNew[0]) ;
        });
    });

This part works ok. Now I am trying to clone this <div id='tableline_00'> and assign new ids to inputs using

var current_id = 0;
$('#btn').click(function(){
    nextElement($('#tableline_00'));
})

function nextElement(element){
    var newElement = element.clone(true);
    var id = current_id+1;
    current_id = id;
    if(id <10)id = '0'+id;
    newElement.attr('id',element.attr('id').split('_')[0]+'_'+id);
    var field = $('input', newElement).attr('id');
    $('input', newElement).attr('id', field.split('_')[0]+'_'+id );
    newElement.appendTo($('#elements'));
    newElement.slideDown('fast');
}

This works too but the $('#group1').on('change', function(event) works just for the first line because all the new clone lines have new input names. How could you change $('#group1') and $('#group2') to be variable. I am new to jQuery so any help/link is useful... maybe different approach?

var a = 'group1', b= 'group2'; $('#' + a).on('change', function(e){}); $('#' + a).on('change', function(e){}); $('#' + b).on('change', function(e){}); — robert, Feb 25 '13 at 01:18
Two things: (a) Use a class instead of an ID. (b) Use event delegation, as explained here: http://stackoverflow.com/questions/12829963/events-triggered-by-dynamically-generated-element-are-not-captured-by-event-hand. — Felix Kling, Feb 25 '13 at 01:33

score 1 · Answer 1 · answered Feb 25 '13 at 09:16

ok, so I followed Felix link and it works. Here is the final code, in case someone else needs it. I've made a few changes on HTML too:

-#elements is the div containing #tableline_00 div;

-#tableline_00 is the div being cloned;

-'label1', 2, 3 and so are the dynamic created labels holding info from 'get_data.php' based on user select

$('#elements').on('change', 'select', function() {
    handler = $(this).val();
    name = $(this).attr('id');
    $.post('get_data.php', {sent_id: handler },
        function(bounced) {
           var valNew1 = bounced.split(',');
            $('.label' + a).html(valNew1[0]) ;
        });
});

    var a = 0;
    $('#btn').click(function(){
        nextElem($('#tableline_00'));
    })

    function nextElem(element){
        var newElement = element.clone(true);
        a = a + 1;
        $('select', newElement).attr('id','select' + a);
        $('select', newElement).attr('class','select' + a);
        $('select', newElement).attr('value', 'select' + a);
         $('label', newElement).attr('class','label' + a);
        $('label', newElement).attr('value', 'label' + a);
        newElement.appendTo($('#elements'));
        newElement.slideDown('fast');
    }

jQuery dynamic select and clone div

1 Answers1