迭代动态生成的输入字段 ID 并使用 keyup 在单独的输入字段中获取它们的值

Question

强制性 div id 会动态显示不同数量的输入字段。从第一个开始的每个输入字段都有一个 id attr1，然后是 attr2,..attr[n]。我需要一种方法将它放入一个数组中，该数组使用 keyup 获取每个输入字段的值，并将它们放入一个带有 id 详细信息的单独输入字段中。此代码有效，但在某些情况下，当硬编码输入字段 ID 超过生成的输入字段 ID 时 returns 未定义。谢谢

   <div id="attributes"> <!--Start of Div Refreshed on Ajax Page Refresh-->
          <div id="mandatory">

          </div>
   </div>



     var total = '#attr1, #attr2';

     $("#attributes").on('keyup', total, function(){                    
                    update();
            })  

            function update() {
                $("#detail").val($('#attr1').val() + "," $('#attr2').val());
              }

Answer 1

我不确定这是否是您要查找的内容，但我认为它会带您走上正确的道路。在此示例中，任何时候生成文本输入字段时，都会附加一个输入事件处理程序来更改主文本区域的值。如果这不是您要找的东西，请告诉我，我很乐意尝试解决更多问题。

document.getElementById('adder').onclick = function() {
  var dynamicTextbox = document.createElement('input');
  dynamicTextbox.setAttribute('type', 'text');
  dynamicTextbox.setAttribute('class', 'dynamicText');
  dynamicTextbox.addEventListener("input", function() {
    var allTextboxes = document.getElementsByClassName('dynamicText');
    var allValues = '';
    for (var i=0; i < allTextboxes.length; i++) {
      allValues += allTextboxes[i].value;
    }
    document.getElementById('detail').value = allValues;

  });
  document.getElementById('textboxes').appendChild(dynamicTextbox);
}

<textarea id="detail"></textarea>
<input id="adder" type="button" value="Add Text Field" />
<div id="textboxes"></div>

Answer 2

如果我没看错你的问题，我想你正在寻找类似的东西：

var fields = $("#mandatory").find("input"),
    ids = [];

fields.each(function(){
  $(this).on("keyup", function(){
     var val = "";
      ids = [];
      fields.each(function(){
        val += $(this).val() + (fields.length === ($(this).index() + 1) ? "": ", ");    
        
        ids.push($(this).get(0).id);
      });
      $("#detail").val(val);
      console.log(ids)
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="attributes">
<div id="mandatory">
<input id="one" class="one" value="54"/>
<input id="two" class="two" value="55"/>
<input id="three" class="three" value="587"/>
</div>
</div>
<input id="detail" type="text" />

迭代动态生成的输入字段 ID 并使用 keyup 在单独的输入字段中获取它们的值

Iterating over dynamically generated input field ids and using keyup to get their values in a separate input field

javascript

jquery

arrays

keyup