Comment créer des champs de saisie créés par ajax dans un tableau

Question

Comment faire pour que ce code fonctionne pour les champs de saisie générés dynamiquement. Cela fonctionne pour les champs d'entrée statiques mais pas dans la div avec id = "attributs" qui obtient des champs d'entrée générés dynamiquement. J'ai fait tout son possible pour que le javascript fonctionne quand les champs de saisie sont générés avec un appel ajax. Voici un violon que j'ai fait pour les champs statiques https://jsfiddle.net/306h20ng/2/ Merci.

<div id="attributes"> <!--Start of Div Refreshed on Ajax Page Refresh--> 
    <div id="mandatory"> 
     <h5 style="font-weight:600; color:red;"> Mandatory Attributes</h5> 
    </div> 
    </div> 

    <div id ="mandatory"> //Static input fields 
     <input type="text" id="attr1" name="emailAddress" value=""> 
     <input type="text" id="attr2" name="emailAddress" value=""> 
     <input type="text" id="attr3" name="emailAddress" value=""> 
    </div> 
     <input type="text" id="detail" name="username" value=""> 

JS

var text = $("#mandatory :input").map(function() { 
    return this.id; 
}).get(); 

var attr = []; 
for (i = 0; i < text.length; i++) { 
    attr.push('#' + text[i]); 
} 
var mat = attr.join(", "); 


$(mat).keyup(function() { 
    update(); 

    function update() { 
    var val = attr.map(function(a) { 
     return $(a).val(); 
    }).join(",") 
    $("#detail").val(val); 

    } 
}); 

Answer 1

Utilisez on() pour delegate l'écouteur d'événement à #mandatory donc de nouvelles entrées que vous ajoutez à l'intérieur il sera également le même auditeur

$('#mandatory').on('input', ':input',function(){ 
    var values = $('#mandatory :input').map(function(){ 
     return this.value 
    }).get() 
    $("#detail").val(values.join()); 
}); 

Notez que l'événement "input" couvre keyup, d'autres événements clés, coller et changer aussi. Ajuster si nécessaire.

Notez également rien de tout cela est tributaire de id attribut qui trop complique le code

DEMO