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

Question

请问我如何使此代码适用于动态生成的输入字段。它适用于静态输入字段，但不适用于 id="attributes" 的div，该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() 将事件侦听器委托给 #mandatory，以便您在其中添加的任何新输入也将具有相同的侦听器

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

请注意，事件"input"还包括键控、其他关键事件、粘贴和更改。根据需要进行调整。

另请注意，这些都不依赖于使代码过于复杂的属性id

属性

演示