2013-02-25 4 views
0

У меня есть <select id='group1'> падение вниз, заполняющую <textarea id='group2'> с помощьюJQuery динамического выбора и клон ДИВ

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

Эта часть работает нормально. Теперь я пытаюсь клонировать эту <div id='tableline_00'> и назначить новые id S к входам с помощью

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'); 
} 

Это тоже работает, но $('#group1').on('change', function(event) работает только для первой линии, так как все новые клоны линии имеют новые имена ввода. Как вы могли бы изменить значение $('#group1') и $('#group2'). Я новичок в jQuery, поэтому любая помощь/ссылка полезна ... может быть, другой подход?

+0

уаг а = 'group1', Ь = 'group2'; $ ('#' + a) .on ('change', function (e) {}); $ ('#' + a) .on ('change', function (e) {}); $ ('#' + b) .on ('change', function (e) {}); – robert

+0

Две вещи: (a) Используйте класс вместо идентификатора. (b) Используйте делегирование событий, как описано здесь: http://stackoverflow.com/questions/12829963/events-triggered-by-dynamically-generated-element-are-not-captured-by-event-hand. –

+0

Благодарю вас, ребята, я сразу же попробую. –

ответ

1

ОК, поэтому я следил за ссылкой Felix, и он работает. Вот окончательный код, если кому-то это понадобится. Я также внесла несколько изменений в HTML:

- # element - это div, содержащий # tableline_00 div;

- # tableline_00 - это клонирование div;

-'label1' , 2, 3 и так динамические созданные этикетки холдинг информацию от 'get_data.php' на основе пользователя выбрать

$('#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'); 
    } 
Смежные вопросы