独自のdivをコピーして挿入する関数を作成するにはどうすればよいですか？

Question

を編集してください：最終解決のためにhttps://jsfiddle.net/DTcHh/40740/を訪問してください！

私は「質問を追加」（ブートストラップ）ラジオボタンでdivを持っています。私の意図は、言及したボタンがクリックされたときにボタンが配置されたdiv要素をコピーして下に置かれるべきであることを、次のとおりです。

私はそれをどのように行うのですか？ボタンをクリックしても何も起こりません。

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（ない私のコード）私が再現してみました。

Answer 1

Updated fiddle。

singleQuestionModuleを定義し、インラインイベントを削除すると、コードが機能します。

注：

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

コード：

$("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>

あなたはラジオボタンのクリックイベントがあなたが .on()のようなイベントの委任を使用する必要が新しい作成の質問に取り付けられるようにしたい場合