Question

请问如何使此代码适用于动态生成的输入字段。它适用于静态输入字段，但不适用于具有动态生成的输入字段的id =“attributes”的div。当使用ajax调用生成输入字段时，我已尽一切可能使javascript工作。这是我为静态字段制作的小提琴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"涵盖了键盘，其他关键事件，粘贴和更改。如果需要调整。

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

的 DEMO

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

1 个答案: