克隆字段的Jquery onchange事件

Question

我想出瞭如何克隆我的表單行並在每個表單字段的ID末尾附加一個導入數字。所以我認爲在ID末尾添加簡寫號碼可以很容易地使用change事件將一個id的值複製到另一個id的值，但這對於克隆行不起作用！

我使用它來創建新的表格行：

$('#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])從產品選擇值複製到「ID」字段表格。它僅適用於雖然第一位，並在「克隆」表格字段不起作用：

$("#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

當你正在使用克隆並追加到DOM動態，所以你需要委託事件處理程序創建select他們

// 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