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

Question

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

更新:这个问题是一个后续问题!

我有一个带有"添加问题"(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);
});

这是我试图重现的一个工作示例(不是我的代码).

Answer 1

更新了小提琴。

singleQuestionModule如果您定义并删除内联事件，您的代码将起作用。

注意：如果您希望将单选按钮单击事件附加到新创建的问题，您需要使用事件委托，.on()例如：

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

代码：

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