Событие Jquery onchange для клонированного поля

Question

Я выяснил, как клонировать строки формы и добавить число incriminting в конец идентификатора для каждого поля формы. Поэтому я подумал, что с добавленным номером incriminenting в конце идентификатора он будет легко использовать в событии изменения, чтобы скопировать значение одного идентификатора на другой, но это не работает для клонированных строк!

Я использую это, чтобы создать новые формы строки:

$('#btnRemove').attr('disabled','disabled'); 
      $('#btnAdd').click(function() { 
       var num  = $('.clonedInput').length; 
       var newNum = new Number(num + 1); 

       var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); 

           newElem.children('.product').attr('id', 'product' + newNum).attr('name', 'product' + newNum); 
       newElem.children('.productid').attr('id', 'productid' + newNum).attr('name', 'productid' + newNum); 

       $('#input' + num).after(newElem); 
       $('#btnRemove').removeAttr('disabled','disabled'); 

       if (newNum == 7) 
       $('#btnAdd').attr('disabled','disabled'); 


      }); 

      $('#btnRemove').on('click', function() { 
       $('.clonedInput').last().remove(); 
       $('#btnAdd').removeAttr('disabled','disabled'); 
      }); 

И я (пытаюсь), чтобы использовать этот код, чтобы скопировать сериализированный идентификатор продукта .val(value.split('-')[3]) от выбора значения продукта в поле «ид» в форма. Он работает только для первого, хотя и не работает на «клонированных» полей формы:

$("#product").on('change keyup', function() { 
     var value = $('option:selected', this).val(); 
      $("#productid").val(value.split('-')[3]); 
     }).keyup(); 
     $("#product2").on('change keyup', function() { 
     var value = $('option:selected', this).val(); 
      $("#productid2").val(value.split('-')[3]); 
     }).keyup(); 
     $("#product3").on('change keyup', function() { 
     var value = $('option:selected', this).val(); 
      $("#productid3").val(value.split('-')[3]); 
     }).keyup(); 
     $("#product4").on('change keyup', function() { 
     var value = $('option:selected', this).val(); 
      $("#productid4").val(value.split('-')[3]); 
     }).keyup(); 
     $("#product5").on('change keyup', function() { 
     var value = $('option:selected', this).val(); 
      $("#productid5").val(value.split('-')[3]); 
     }).keyup(); 
     $("#product6").on('change keyup', function() { 
     var value = $('option:selected', this).val(); 
      $("#productid6").val(value.split('-')[3]); 
     }).keyup();​ 

я ставлю это на jsfiddle так будет легче увидеть, что моя проблема: Demo

Answer 1

Как вы создаете select используя клон и добавлять в DOM динамически, так что вам нужно делегировать обработчик событий для них

// delegate event handler 
$('#myForm').on('change keyup', 'select[id^=product]', function() { 
    var value = $('option:selected', this).val(); 
    $(this).next('input.productid').val(value.split('-')[3]); 
}).keyup(); 

DEMO