0

テキスト入力を使用していくつかの要素を追加したい要素のリスト (ブートストラップから取得したスタイル) があります。これが私のコードです-

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

より単純なリストでコードを動作させることはできますが、このリストでは動作しません。誰でも理由を見つけることができますか?

4

2 に答える 2

1

あなたの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>Apple</li>

ここでSOで強調表示されているコードにコードを配置すると、そのような問題を見つけるのは常に面白いです。

JavaScript を機能させるには、以下を使用できます: http://jsfiddle.net/jX2K3/21/

于 2013-11-13T15:11:12.120 に答える
0

次のコードを試してください..

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

jsフィドル

于 2013-11-13T15:28:29.273 に答える