Iteration über dynamisch generierte Eingabefeld-IDs und Verwendung von keyup zum Abrufen ihrer Werte in einem separaten Eingabefeld

Question

Die obligatorische div-ID erhält verschiedene Zahlen von Eingabefeldern, die dynamisch in diesem Feld angezeigt werden. Jedes Eingabefeld, das mit dem ersten beginnt, erhält eine ID attr1, dann attr2, .. attr [n]. Ich brauche eine Möglichkeit, dies in ein Array zu bekommen, das den Wert jedes Eingabefeldes mit keyup bekommt und in ein separates Eingabefeld mit ID-Details legt. Dieser Code funktioniert, gibt aber in einigen Fällen undefiniert zurück, wenn das hartcodierte Eingabefeld ids das generierte Eingabefeld ids überschreitet. Vielen Dank.

<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

Wenn ich Recht Ihre Frage verstanden denke ich, du bist für so etwas suchen:

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

 
fields.each(function(){ 
 
\t \t $(this).on("keyup", function(){ 
 
    \t 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" />

Answer 2

Ich bin mir nicht sicher, ob dies ist, was Sie suchen, aber ich denke, es wird Ihnen den richtigen Weg nach unten. In diesem Beispiel wird jedes Mal, wenn ein Texteingabefeld generiert wird, ein Eingabe-Ereignishandler an ihn angehängt, der den Wert eines Haupttextbereichs ändert. Wenn das nicht genau das ist, wonach Sie suchen, lassen Sie es mich wissen und ich werde mich freuen, es auszuprobieren.

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>