2017-12-20 30 views
6

Chỉnh sửa: Truy cập https://jsfiddle.net/DTcHh/40740/ để có giải pháp cuối cùng!Làm cách nào để tạo một hàm sao chép và chèn chính div đó?

Tôi có nút div có nút radio "thêm câu hỏi" (Bootstrap). Ý định của tôi là, rằng div trong đó nút được đặt nên được sao chép và đặt bên dưới khi nút đề cập được nhấp:

"singleQuestionModule"

Làm thế nào để làm điều đó? Không có gì xảy ra khi tôi nhấp vào nút.

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 (không mã của tôi) mà tôi đã cố gắng để sinh sản.

+0

Vấn đề của bạn là bạn sử dụng đầu vào radio thay vì thông thường b uttons. Đầu vào radio không hỗ trợ chức năng '.click()' – DestinatioN

+0

Tại sao bạn sử dụng nút radio làm nút? Chỉ cần sử dụng '

+0

Tôi không chắc chắn 100% về những gì bạn muốn làm nhưng ý tưởng là tạo một bài kiểm tra tùy chỉnh bạn cần phải thêm câu hỏi và sau đó vào cuối "lưu" thử nghiệm, phải không? Bạn nên đặt 2 nút của bạn ra khỏi div và chỉ thêm câu hỏi, nếu mỗi khối có một "thêm câu hỏi" và "lưu kiểm tra" nút đó là lạ, không? –

Trả lời

4

Updated fiddle.

Mã của bạn sẽ làm việc nếu bạn xác định singleQuestionModule và loại bỏ các inline-sự kiện.

LƯU Ý: Nếu bạn muốn sự kiện đài phát thanh nút bấm được gắn liền với những câu hỏi tạo mới, bạn cần phải sử dụng đoàn sự kiện .on() như:

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

Code:

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

Khi tôi kiểm tra JSFiddle của bạn, nó chỉ thêm một khối khi bạn bấm vào khối đầu tiên, nó có bình thường không? Tôi nghĩ rằng để giữ cho việc sử dụng "logic" hai nút nên được "xóa" trong khối khác và chỉ có mặt trong một trong những cuối cùng, không? Nhưng ít nhất bạn anwser câu hỏi của mình và bạn thêm khối mới vì vậy nó mát mẻ ^^ –

+0

Cảm ơn sự can thiệp của bạn @MickaelLeger ... Kiểm tra lưu ý trong bài của tôi .. Tôi đang làm việc trên cập nhật. –

+0

Tôi đã cố gắng để thay đổi Fiddle của bạn và nếu bạn chỉ cần đặt "hình thức nhóm hàng" div ra khỏi div chính nó vẫn hoạt động nhưng nhìn nhiều hơn "hợp lý"! Nhưng có lẽ tôi không hiểu điểm OP với mã này :) –

Các vấn đề liên quan