如何创建一个复制和插入它自己的 div 的函数？

Question

编辑：访问https://jsfiddle.net/DTcHh/40740/获取最终解决方案！

更新：此question 是后续行动！

我有一个带有“添加问题”（引导程序）单选按钮的 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 并删除内联事件，您的代码将起作用。

注意：如果您希望将单选按钮单击事件附加到新创建的问题，您需要使用事件委托.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>