Jak utworzyć funkcję, która kopiuje i wstawia własny element div?

Question

Edytuj: Odwiedź stronę https://jsfiddle.net/DTcHh/40740/, aby uzyskać ostateczne rozwiązanie!

Mam element div z przyciskiem wyboru "Dodaj pytanie" (Bootstrap). Moją intencją jest, że div, w którym umieszczony jest przycisk powinien być skopiowane i umieszczone pod spodem gdy wspomniano kliknięciu przycisku:

Jak mam to zrobić? Nic się nie dzieje po kliknięciu przycisku.

js.fiddle

HTML:

<div id="singleQuestionModule"> 
    <div class="question-wrapper"> 
     <form class="form-group"> 
      <div class="d-flex justify-content-center"> 
       <fieldset class="form-group row"> 
        <legend class="col-form-legend col-sm-10"></legend> 
        <div class="form-group row"> 
         <div class="input-group input-group"> 
          <label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label> 
         </div> 
        </div> 
        <div class="form-group row"> 
         <div class="input-group input-group"> 
          <input type="text" class="form-control" aria-label="" id="wQuestion" style="width: 540px;"> 
         </div> 
        </div> 
        <div class="form-group row"> 
         <div class="input-group input-group"> 
          <label id="questionOptions" class="form-control-label" style="width: 540px;" 
            for="wQuestion">Enter 
           avaible options:</label> 
         </div>      
        </div> 
        <div class="form-group row"> 
         <div class="btn-group" data-toggle="buttons"> 

          <label class="btn btn-success"> 
           <input type="radio" name="options" id="radioAddQuestion" 
             onclick="addQuestionModule('singleQuestionModule')" 
             autocomplete="off">Add Question</label> 

          <label class="btn btn-success"> 
           <input type="radio" name="options" id="radioSaveTest" value="saveTest()" 
             autocomplete="off">Save Test </label> 
         </div> 
        </div> 
       </fieldset> 
      </div> 
     </form> 
    </div> 
</div> 

jQuery

$("#radioAddQuestion").click(function() { 
    var html = $("#" + singleQuestionModule).html(); 
    $(html).insertAfter("#" + singleQuestionModule); 
}); 

This is a working example (nie mój kod), które starałem się odtworzyć.

Answer 1

Updated fiddle.

Twój kod zadziała, jeśli zdefiniujesz singleQuestionModule i usuniesz zdarzenie wbudowane.

UWAGA: Jeśli chcesz zdarzenie radiowy Kliknij przycisk, aby być dołączone do nowo utworzonego pytania trzeba użyć zdarzenia delegacji .on() jak:

$("body").on("click", "#radioAddQuestion", function() { 

Kod:

$("body").on('click', '#radioAddQuestion', function() { 
 
    var singleQuestionModule = "singleQuestionModule"; 
 
    var question = $(".question:first").html(); 
 
    var question_label = $(".question-label:first").html(); 
 

 
    $(question_label).insertBefore(".options-label"); 
 
    $(question).insertBefore(".options-label"); 
 
});

#singleQuestionModule { 
 
    margin-left: 50px; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div id="singleQuestionModule"> 
 
    <div class="question-wrapper"> 
 
    <form class="form-group"> 
 
     <div class="d-flex justify-content-center"> 
 
     <fieldset class="form-group row"> 
 
      <legend class="col-form-legend col-sm-10"></legend> 
 
      <div class="form-group row question-label"> 
 
      <div class="input-group input-group"> 
 
       <label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label> 
 
      </div> 
 
      </div> 
 
      <div class="form-group row question"> 
 
      <div class="input-group input-group"> 
 
       <input type="text" class="form-control" aria-label="" id="wQuestion" style="width: 540px;"> 
 
      </div> 
 
      </div> 
 
      <span class="options-label"></span> 
 
      <br> 
 
      <div class="form-group row"> 
 
      <div class="input-group input-group"> 
 
       <label id="questionOptions" class="form-control-label" style="width: 540px;" for="wQuestion">Enter avaible options:</label> 
 
      </div> 
 
      </div> 
 
      <div class="form-group row"> 
 
      <div class="btn-group" data-toggle="buttons"> 
 

 
       <label class="btn btn-success" id="radioAddQuestion"> 
 
       <input type="radio" name="options" autocomplete="off">Add Question</label> 
 

 
       <label class="btn btn-success"> 
 
       <input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">Save Test </label> 
 
      </div> 
 
      </div> 
 
     </fieldset> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>