CODEWITHSUNDEEP
javascriptjqueryhtmlgetelementbyidpseudo-element
Rafael Veloso
Rafael Veloso

Reputation: 43

Access to a dynamically created element with jQuery

I need to access a dynamically created element with jQuery. My html code is as follows:

<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>

The element is created using the jQuery .before() function:

$("#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>')
});

The elements are created successfully, but when I run:

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

the value returned is always 1, not the value of elements created +1 ...

Upvotes: 0

Views: 582

Answers (1)

Nick
Nick

Reputation: 16596

You can't have more than one element with the same id. Instead, append it with a class of radiusDiameter and then use a selector like this.

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

Upvotes: 1

Related Questions