2017-10-15 40 views
0

動的に作成された要素にjQueryでアクセスする必要があります。次のように私のhtmlコードは次のとおりです。jQueryで動的に作成された要素へのアクセス

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

+0

イベントの委任を有効にする必要があります。 –

+0

[動的に作成された要素のイベントバインディングの可能な重複?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) –

答えて

1

idを持つ複数の要素。代わりに、radiusDiameterのクラスを追加して、このようなセレクタを使用します。

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

これは私の問題を解決しました。ありがとうございます!私は同じIDを使用できないという考えを持っていましたが、クラス内の値を使用すると結果が期待されることを知りませんでした。ありがとうございました! –

関連する問題