[英]Add text input dynamically to list with radio buttons
我有一個元素列表(從引導程序中獲取樣式),我想使用文本輸入向其中添加更多元素。 這是我的代碼-
<div class="col-lg-6">
<div class="input-group">
<input type="text" id = "input" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id = "add" >Add</button>
</span>
</div><!-- /input-group -->
<form>
<ul class="list-group" id = "tagList">
<li class="list-group-item"> <b>Tags </b></li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Orange</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Pear</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Banana</li>
</ul>
</form>
<script src="http://codeorigin.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#add').click(function(){
var text = $('#input').val();
if(text.length){
$('<li />', {html: text}).appendTo('ul.tagList')
}
});
</script>
我可以使代碼使用一個簡單的列表,但不能與此列表一起使用。 誰能發現為什么不呢?
您的李未關閉:
<li class="list-group-item" <span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
應該:
<li class="list-group-item"><span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
一旦將代碼放入此處突出顯示的代碼中,發現這些問題總是很有趣。
為了使您的JavaScript正常運行,您可以使用以下代碼: http : //jsfiddle.net/jX2K3/21/
嘗試下面的代碼。
$('#add').click(function(){
var text = $('#input').val();
if(text.length){
$('ul').append('<li class="list-group-item"><span class ="input-group-addon"> <input type="radio"> </span>'+text+'</li>');
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.