2017-12-20 107 views
6

संपादित करें: अंतिम समाधान के लिए https://jsfiddle.net/DTcHh/40740/ पर जाएं!मैं एक फ़ंक्शन कैसे बना सकता हूं जो प्रतिलिपि बनाता है और अपने स्वयं के div को सम्मिलित करता है?

मेरे पास "जोड़ें प्रश्न" (बूटस्ट्रैप) रेडियो बटन वाला एक div है। मेरा इरादा यह है कि div जिसमें बटन रखा गया है की नकल की और नीचे रखा जाना चाहिए जब उल्लेख बटन क्लिक किया जाता है:

"singleQuestionModule"

मुझे लगता है कि कैसे करते हैं? जब मैं बटन पर क्लिक करता हूं तो कुछ भी नहीं होता है।

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 (मेरी कोड नहीं) है कि मैं पुन: पेश करने की कोशिश की।

+0

आपकी समस्या यह है कि आप सामान्य बी के बजाय रेडियो इनपुट का उपयोग करते हैं uttons। रेडियो इनपुट '.click()' फ़ंक्शन – DestinatioN

+0

का समर्थन नहीं करते हैं आप रेडियो के रूप में बटन का उपयोग क्यों कर रहे हैं? बस '

+0

शामिल नहीं किया है, मैं 100% सुनिश्चित नहीं हूं कि आप क्या करना चाहते हैं लेकिन विचार कस्टम परीक्षण बनाना है आपको प्रश्न जोड़ने की आवश्यकता है और अंत में परीक्षण को "सेव" करें, है ना? आपको अपने 2 बटन div से बाहर रखना चाहिए और केवल प्रश्न जोड़ना चाहिए, यदि प्रत्येक ब्लॉक में "प्रश्न जोड़ें" और "परीक्षण सहेजें" बटन है तो यह अजीब है, नहीं? –

उत्तर

4

Updated fiddle

यदि आप singleQuestionModule परिभाषित करते हैं और इनलाइन-ईवेंट को हटाते हैं तो आपका कोड काम करेगा।

नोट: आप रेडियो बटन क्लिक करें घटना नई बनाई सवाल आप की तरह घटना प्रतिनिधिमंडल .on() उपयोग करने की आवश्यकता के साथ संलग्न किया चाहते हैं:

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

+0

जब मैं आपके जेएसएफडल का परीक्षण करता हूं तो जब आप पहले ब्लॉक पर क्लिक करते हैं तो यह केवल एक ब्लॉक जोड़ता है, क्या यह सामान्य है? मुझे लगता है कि "तर्क" का उपयोग रखना है, दो बटन को अन्य ब्लॉक में "हटाएं" होना चाहिए और केवल अंतिम में मौजूद होना चाहिए, नहीं? लेकिन कम से कम आप उसका प्रश्न पूछताछ करते हैं और आप नया ब्लॉक जोड़ते हैं, इसलिए यह अच्छा है ^^ –

+0

आपके हस्तक्षेप @ मिकेल लेजर के लिए धन्यवाद ... मेरी पोस्ट में नोट देखें .. मैं अपडेट पर काम कर रहा हूं। –

+0

मैंने आपकी पहेली को बदलने की कोशिश की और यदि आप मुख्य div से "फॉर्म-ग्रुप पंक्ति" div डालते हैं तो यह अभी भी काम करता है लेकिन अधिक "तार्किक" दिखता है! लेकिन शायद मैं इस कोड के साथ ओपी के बिंदु को समझ नहीं पाया :) –

संबंधित मुद्दे

 संबंधित मुद्दे