jQuery로 동적으로 생성 된 요소에 대한 액세스

Question

jQuery를 사용하여 동적으로 생성 된 요소에 액세스해야합니다. 다음과 같이 내 HTML 코드는 다음과 같습니다

<div class="row" id="divRowBtnAdd"> 
    <div class="form-group col-md-5" id="divBtnAddRow"> 
     <button type="button" class="btn btn-info btn-xs" id="btnAddRow"> 
     Click for another radius and diameter line 
     </button> 
    </div> 
</div> 

요소는 JQuery와 .before를 사용하여 만들어집니다() 함수 :

$("#btnAddRow").click(function() { 
$("#divRowBtnAdd").before('<div class="row" id="radiusDiameter">' + 
'<div class="form-group col-md-2">' + 
' <label for="radius">Radius</label>' + 
' <input type="number" class="form-control" step="0.1" id="radius" placeholder="Radius">' + 
'</div>' + 
'<div class="form-group col-md-2">' + 
' <label for="diameter">Diameter</label>' + 
' <input type="number" class="form-control" step="0.1" id="diameter" placeholder="Diameter">' + 
'</div>' + 
'<div class="form-group col-md-4">' + 
' <br/> <input type="button" class="btn btn-danger" value="Delete line" id="btnCloseDivCurva"/>' + 
'</div>' + 
'</div>') 
}); 

요소가 성공적으로 생성됩니다,하지만 난 실행하면

var count = $("#radiusDiameter").length; 

반환 된 값은 생성 된 요소의 값이 아닌 항상 1입니다. +1 ...

Answer 1

id을 가진 둘 이상의 요소. 대신, radiusDiameter 클래스로 추가 한 다음 이와 같은 선택기를 사용하십시오.

var count = $(".radiusDiameter").length;