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