Les champs de sélection clonés ne déclenchent pas d'événement

Question

Je n'arrive pas à trouver une solution pour ce tableau que je clone avec JQuery. Je suis capable de cloner la table et mettre à jour les propriétés ID et NAME pour éviter les conflits html. La liste déroulante Sélectionner ne déclenche un événement vers son JQuery que lorsque j'utilise la première copie (originale) de la table. Cependant, la version clonée ne déclenche pas l'événement requis que j'utilise pour remplir les champs Description Quantité et Prix. Je poste ma table et JQuery. Quelqu'un peut-il s'il vous plaît laissez-moi savoir ce que je manque pour que cela fonctionne? J'ai testé le JQuery en créant deux tables avec leurs identifiants uniques respectifs que j'utilise pour déclencher l'événement, ce qui fonctionne bien. Ensuite, lorsque j'utilise JQuery pour cloner la table, l'événement n'est pas déclenché.

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

Le JQuery qui effectue le clone et met à jour les ID et les propriétés NOM:

<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

Code jQuery à l'intérieur $(document).ready() fonction ne fonctionnera que pour DOM disponibles éléments lorsque la page chargée

Ainsi, afin pour le faire fonctionner pour les listes déroulantes dynamiquement clonées mettre à jour votre code de liaison jQuery comme ceci:

Ce:

$(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!") }); 
}); 

à ceci:

$(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!") });