如何创建一个函数来复制和插入它自己的 div?
How do I create a function which copies and inserts it's own div?
编辑:访问https://jsfiddle.net/DTcHh/40740/获取最终解决方案!
更新:这个是后续!
我有一个带有 "add 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(不是我的代码),我试图重现。
如果您定义 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>
编辑:访问https://jsfiddle.net/DTcHh/40740/获取最终解决方案!
更新:这个
我有一个带有 "add 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(不是我的代码),我试图重现。
如果您定义 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>