克隆的选择字段不会触发事件

我无法找到我用JQuery克隆的这个表的解决方案。 我能够克隆表并更新ID和NAME属性以避免html冲突。 当我使用表的第一个（原始）副本时，Select下拉列表仅触发事件到其JQuery。 但是，克隆版本不会触发我用于填写“描述数量”和“价格”字段的必需事件。 我发布了我的表和JQuery。 有人可以让我知道我错过了什么让这个工作？ 我通过创建两个带有各自唯一ID的表来测试JQuery，我用它来触发事件，工作正常。 然后，当我使用JQuery克隆表时，不会触发事件。

 
 
 
 
  
  Select Product AAATG AAATGearlybird AB12LB AB14LB AB1LB ABS1LB Alberto's Dressing APRIL April16oz April8oz AUGUST BB BasilS case BB ChiliS case BB Lpasta case BB OO 500ML BB OO 750ML BB Spasta case BB Tpasta case BB VegS case BEEMB  
 
 
 
  
 
 
  
 
 
  

执行克隆并更新ID和NAME属性的JQuery：

  var template = $('#sections .section:first').clone(); var sectionsCount = 1; $('body').on('click', '.addsection', function () { sectionsCount++; var section = template.clone().find(':input').each(function () { var newId = this.id.substring(0, this.id.length - 1) + sectionsCount; var newName = this.name.substring(0, this.name.length - 1) + sectionsCount; this.id = newId; this.name = newName; }).end() .appendTo('#sections'); return false; }); //remove section $('#sections').on('click', '.remove', function () { $(this).parent().fadeOut(300, function () { $(this).parent().parent().empty(); return false; }); return false; });  Finally, the JQuery that listen to the Event to fill-in the remaining fields when I select a Product. $(document).ready(function () { $('#ProductCode1').on("change", function () { alert("It Works!") }); $('#ProductCode2').on("change", function () { alert("It Works again!") }); $('#ProductCode3').on("change", function () { alert("It Works a third time!") }); });  

Answer 1

$(document).ready()函数中的jQuery代码仅在加载页面时对可用的DOM元素起作用

因此，为了使其适用于动态克隆的下拉列表，请更新您的jQuery绑定代码，如下所示：

这个：

 $(document).ready(function () { $('#ProductCode1').on("change", function () { alert("It Works!") }); $('#ProductCode2').on("change", function () { alert("It Works again!") }); $('#ProductCode3').on("change", function () { alert("It Works a third time!") }); }); 

对此：

 $(document).on('change', '#ProductCode1', function(){ alert("It Works!") }); $(document).on('change', '#ProductCode2', function(){ alert("It Works again!") }); $(document).on('change', '#ProductCode3', function(){ alert("It Works a third time!") });