2017-10-15 136 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。之前()函數創建:

$("#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的概念,但不知道當在課堂上使用該值時,結果將是預期的,謝謝! –