克隆選擇字段不會觸發事件

Question

我無法找到該表使用JQuery克隆的解決方案。我能夠克隆表並更新ID和NAME屬性以避免HTML衝突。當我使用表的第一個（原始）副本時，選擇下拉列表僅觸發其JQuery事件。但是，克隆版本不會觸發我用來填寫「描述數量」和「價格」字段的必需事件。我張貼我的表和JQuery。有人能讓我知道我錯過了什麼讓它起作用嗎？我通過創建兩個表和他們各自的唯一ID來測試JQuery，我使用這些ID來觸發事件，這很好。然後，當我使用JQuery克隆表時，事件不會被觸發。

  <table> 
       <tr> 
        <td style="width:20%;"> 
         <div class="input-group date"> 
          <div class="input-group-addon"> 
           <span class="glyphicon glyphicon-duplicate addsection"></span> 
          </div> 
          <select class="form-control" id="ProductCode1" name="ProductCode1" style="border-bottom-color:black!important;border-color:white;"> 
           <option selected>Select Product</option> 
           <option value='292' data-description='APRIL Afternoon At the Greenhouse TICKET' data-price='35.00'>AAATG</option> 
           <option value='285' data-description='APRIL AFTERNOON AT THE GREENHOUSE Ticket EARLYBIRD SPECIAL' data-price='30.00'>AAATGearlybird</option> 
           <option value='30' data-description='Organic Adzuki Beans 1/2 Lb' data-price='4.25'>AB12LB</option> 
           <option value='31' data-description='Organic Adzuki Beans 1/4 Lb' data-price='2.25'>AB14LB</option> 
           <option value='29' data-description='Organic Adzuki Beans 1 Lb' data-price='8.00'>AB1LB</option> 
           <option value='47' data-description='Organic Adzuki Seeds 1 Lb' data-price='5.00'>ABS1LB</option> 
           <option value='145' data-description='Alberto&#x27;s Lemon/Garlic Salad Dressing 16 Oz.' data-price='11.00'>Alberto&#x27;s Dressing</option> 
           <option value='241' data-description='Organic Fenugreek Sprouted Beans 4 oz.' data-price='2.00'>APRIL</option> 
           <option value='310' data-description='Organic Fenugreek Sprouted Beans 16 oz' data-price='7.75'>April16oz</option> 
           <option value='309' data-description='Organic Fenugreek Sprouted Beans 8 oz' data-price='4.00'>April8oz</option> 
           <option value='284' data-description='SeaVeggieSpecialAUGUST1Kelp/1Dulse/1TripleBlendPACKAGE of 3' data-price='11.50'>AUGUST</option> 
           <option value='271' data-description='DM Organic Tomato Basil Sauce CASE' data-price='36.00'>BB BasilS case</option> 
           <option value='273' data-description='DM Organic Tomato Chili Sauce CASE' data-price='36.00'>BB ChiliS case</option> 
           <option value='276' data-description='DM Organic Linguine Pasta CASE' data-price='36.00'>BB Lpasta case</option> 
           <option value='277' data-description='DM Organic Extra Virgin Olive Oil 500ML CASE' data-price='84.00'>BB OO 500ML</option> 
           <option value='278' data-description='DM Organic Extra Virgin Olive Oil 750ML CASE' data-price='132.00'>BB OO 750ML</option> 
           <option value='275' data-description='DM Organic Spaghetti Pasta CASE' data-price='36.00'>BB Spasta case</option> 
           <option value='274' data-description='DM Organic Tagliatelle Pasta CASE' data-price='36.00'>BB Tpasta case</option> 
           <option value='272' data-description='DM Organic Tomato Vegetable Sauce CASE' data-price='36.00'>BB VegS case</option> 
           <option value='117' data-description='Organic Mixed Beans 1 Lb' data-price='8.00'>BEEMB</option> 
          </select> 
         </div> 
        <td style="width:70%;"><input id="ProductDesc1" class="form-control" style="width: 100%; border-bottom-color: black!important; border-color: white;" name="ProductDesc1" type="text" value="" /></td> 
        <td><input id="quantity1" class="form-control" style="width: 50px; border-bottom-color: black!important; border-color: white; text-align: center;" name="quantity1" type="text" value="0" placeholder="1" /></td> 
        <td> 
         <input id="ProductPrice1" class="form-control cost" style="width: 95px; text-align: center; border-bottom-color: black!important; border-color: white;" name="ProductPrice1" type="text" value="" placeholder="$0.00" /> 
        </td> 
        <td> 
         <div class="input-group-addon"> 
          <span class="glyphicon glyphicon-eject remove"></span> 
         </div> 
        </td> 
       </tr> 
      </table> 

執行克隆和更新ID和name屬性jQuery的：

<script> 
      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; 
      }); 
    </script> 

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!") }); 
        }); 
    </script> 

Answer 1

jQuery代碼中$(document).ready()當網頁加載

於是爲了功能將只能用於提供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!") });