ajax 생성 된 입력 필드를 배열 작업에 넣는 방법

Question

어떻게이 코드를 동적으로 생성 된 입력 필드에 사용할 수 있습니까? 정적 입력 필드에서는 작동하지만 동적으로 생성 된 입력 필드를 가져 오는 id = "attributes"인 div에서는 작동하지 않습니다. 아약스 호출을 사용하여 입력 필드가 생성 될 때 가능한 모든 일을 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() 당신이 그 안에 추가 그래서 새로운 입력 #mandatory에 이벤트 리스너 delegate을 것 같은 청취자에게

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

참고 해당 이벤트 "input" 커버가 키 업, 기타 주요 이벤트, 붙여 넣기 및 변경도 가능합니다. 필요한 경우 조정하십시오.

는 또한이 중 어느 것도 코드

DEMO

에게 지나치게 복잡 id 속성에 의존하지 않습니다주의