2017-12-20 85 views
6

Edytuj: Odwiedź stronę https://jsfiddle.net/DTcHh/40740/, aby uzyskać ostateczne rozwiązanie!Jak utworzyć funkcję, która kopiuje i wstawia własny element div?

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:

"singleQuestionModule"

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

+0

Problem polega na tym, że zamiast wejść normalnych używasz wejść radiowych uttons. Wejścia radiowe nie obsługują funkcji '.click()' – DestinatioN

+0

Dlaczego używasz radia jako przycisku? Po prostu użyj '

+0

Nie jestem w 100% pewny co chcesz robić, ale chodzi o to, aby utworzyć test niestandardowy, tak aby musisz dodać pytanie, a na końcu "zapisać" test, prawda? Powinieneś odstawić swoje 2 przyciski od elementu div i dodać tylko pytanie, jeśli każdy blok ma przycisk "dodaj pytanie" i "zapisz test", to jest dziwne, nie? –

Odpowiedz

4

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>

+0

Kiedy testuję JSFiddle, dodaje on tylko blok po kliknięciu pierwszego bloku, czy to normalne? Myślę, że aby zachować "logikę" użycia, dwa przyciski powinny być "usuwane" w innym bloku i obecne tylko w ostatnim, nie? Ale przynajmniej odpowiedziałeś na jego pytanie i dodajesz nowy blok, więc jest fajny^^ –

+0

Dzięki za interwencję @MickaelLeger ... Sprawdź notatkę w moim poście .. Pracuję nad aktualizacją. –

+0

Próbowałem zmienić twój Fiddle i jeśli po prostu wstawisz "div grupy formularza" z głównego div, nadal działa, ale wygląda bardziej "logicznie"! Ale może nie rozumiałem punktu OP z tym kodem :) –

Powiązane problemy