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

Question

编辑:访问https://jsfiddle.net/DTcHh/40740/求最终解决方案!

更新:这个question是后续!

我有一个带有“添加问题”(Bootstrap) 单选按钮的 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 并删除内联事件，您的代码将有效。

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