使用jQuery访问动态创建的元素

时间:2017-10-15 21:51:44

标签: javascript jquery html getelementbyid pseudo-element

我需要使用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 ...

1 个答案:

答案 0 :(得分:1)

您不能拥有多个具有相同id的元素。相反,使用radiusDiameter类附加它,然后使用这样的选择器。

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