克隆字段的Jquery onchange事件

我想出了如何克隆我的表单行，并在每个表单字段的ID末尾添加一个有罪的数字。 所以我想在ID的末尾附加的incriminenting数字，然后很容易在更改事件上使用将一个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'); }); 

我（尝试）使用此代码将序列化产品id .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

当您使用clone创建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