Добавлен div не работает

Question

Эта часть добавляет раскрывающееся меню к моему html, скрипт делает его доступным. Я пытаюсь добавить это, когда я нажимаю кнопку добавления. Он добавляется, но не подбирается больше:

    <div class="row noMargin topPadding"> 
         <div class="col-xs-12 col-sm-1 col-md-2 " id=""> 
          Correct Answer: 
         </div> 
         <div class="btn-group"> 
          <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Answer<span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Option1</a></li> 
           <li><a href="#">Option2</a></li> 
           <li><a href="#">Option3</a></li> 
           <li><a href="#">Option4</a></li> 
          </ul> 
         </div> 
        </div> 


       <div class="row noMargin topPadding"> 
        <button type="button" class="btn btn-default addQna" id="addQna"> 
         Add 
       </button> 
      </div> 

Вот сценарий. Я пытался присвоить идентификатор DropDown, но не повезло:

<script type="text/javascript"> 
     $(document).ready(function() { 
      var currentItem = 1; 
      $('#addQna').click(function(){ 
       currentItem++; 
       $('#items').val(currentItem); 
       var strToAdd ='<div class="row noMargin topPadding" id="question1"><div class="col-xs-12 col-sm-1 col-md-4 " id=""><input type="text" class="qnaQ form-control" id="qnaQ"></div><div class="col-xs-12 col-sm-1 col-md-2 " id=""> <input type="text" class="qnaOpt1 form-control" id="qnaOpt1"></div><div class="col-xs-12 col-sm-1 col-md-2 " id=""><input type="text" class="qnaOpt2 form-control" id="qnaOpt2"></div> <div class="col-xs-12 col-sm-1 col-md-2 " id=""><input type="text" class="qnaOpt3 form-control" id="qnaOpt2"></div><div class="col-xs-12 col-sm-1 col-md-2 " id=""><input type="text" class="qnaOpt4 form-control" id="qnaOpt4"></div><div class="row noMargin topPadding"><div class="col-xs-12 col-sm-1 col-md-2 " id="">Correct Answer:</div><div class="btn-group"><a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Answer<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Option1</a></li><li><a href="#">Option2</a></li><li><a href="#">Option3</a></li><li><a href="#">Option4</a></li></ul></div></div></div>'; 

       $('#questions').append(strToAdd); 

      }); 
}); 
</script> 
<script type="text/javascript"> 
$(".dropdown-menu li a").click(function(){ 
    var selText = $(this).text(); 
    $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>'); 
    }); 
</script> 

Answer 1

изменение этого:

$(".dropdown-menu li a").click(function(){ 
    var selText = $(this).text(); 
    $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>'); 
    }); 

к этому:

$('body').on('click', ".dropdown-menu li a", function(){ 
    var selText = $(this).text(); 
    $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>'); 
    }); 

и повторите попытку. поскольку вы добавляете новый html, обработчик события click не будет работать так, как вы его используете. но попробовать мое предложение, он должен работать

Heres скрипку: http://jsfiddle.net/s9an4zet/