Question

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

更新：此question是后续内容！

我有一个带有“添加问题”（Bootstrap）单选按钮的div。我的意图是，当点击上面提到的按钮时，应该复制放置按钮的div并将其放在下面：

我该怎么做？单击按钮时没有任何反应。

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>

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

1 个答案: