javascript - 使用 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;