如何将ajax创建的输入字段放入数组中工作

Question

请如何使此代码适用于动态生成的输入字段。它适用于静态输入字段，但不适用于获取动态生成输入字段的id =“attributes”的div。我已经尽一切可能让javascript在Ajax调用生成输入字段时工作。这里是我为静态字段制作的小提琴https://jsfiddle.net/306h20ng/2/谢谢。

<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

使用on()到delegate事件监听器#mandatory所以你加入其中的任何新的投入也将有同样的听众

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

注意事件"input"盖keyup，其他关键事件，粘贴和更改。如果需要调整。

还要注意这一切都不是id属性，它的代码

DEMO

过度依赖复杂