如何创建一个复制并插入自己的div的函数？ [英] How do I create a function which copies and inserts it's own 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 =wQuestionLabelclass =form-control-labelstyle =width：540px;用于= wQuestion >问题：其中/标签>
< / div>
< / div>
< div class =form-group row>
< div class =input-group input-group>
< input type =textclass =form-controlaria-label =id =wQuestionstyle =width：540px;>
< / div>
< / div>
< div class =form-group row>
< div class =input-group input-group>
< label id =questionOptionsclass =form-control-labelstyle =width：540px;
for =wQuestion>输入
avaible options：< / label>
< / div>
< / div>
< div class =form-group row>
< div class =btn-groupdata-toggle =buttons>
< label class =btn btn-success>
< input type =radioname =optionsid =radioAddQuestion
onclick =addQuestionModule（'singleQuestionModule'）
autocomplete =off> Add Question< /标签>
< label class =btn btn-success>
< input type =radioname =optionsid =radioSaveTestvalue =saveTest（）
autocomplete =off>保存测试< / label>
< / div>
< / div>
< / fieldset>
< / div>
< / form>
< / div>
< / div>
jQuery
$（＃radioAddQuestion）。click（function（）{
var html = $（＃+ singleQuestionModule）.html（）;
$ （html）.insertAfter（＃+ singleQuestionModule）;
}）;
这是我试图重现的一个工作示例（不是我的代码）。
解决方案
更新了小提琴 。
如果定义 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：fir st）。html（）; $（question_label）.insertBefore（。options-label）; $（问题）.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 =wQuestionLabelclass =form-control-labelstyle =width：540px;用于= wQuestion >问题：其中/标签> < / DIV> < / DIV> < div class =form-group row question> < div class =input-group input-group> < input type =textclass =form-controlaria-label =id =wQuestionstyle =width：540px;> < / DIV> < / DIV> < span class =options-label>< / span> <峰; br> < div class =form-group row> < div class =input-group input-group> < label id =questionOptionsclass =form-control-labelstyle =width：540px; for =wQuestion>输入可用选项：< / label> < / DIV> < / DIV> < div class =form-group row> < div class =btn-groupdata-toggle =buttons> < label class =btn btn-successid =radioAddQuestion> < input type =radioname =optionsautocomplete =off>添加问题< / label> < label class =btn btn-success> < input type =radioname =optionsid =radioSaveTestvalue =saveTest（）autocomplete =off>保存测试< / label> < / DIV> < / DIV> < /字段集> < / DIV> < /形式> < / div>< / div>
Edit: Visit https://jsfiddle.net/DTcHh/40740/ for the final solution!
Update: This question is a followup!
I have a div with an "add question" (Bootstrap) radio button. My intention is, that the div in which the button is placed should be copied and placed underneath when the mentioned button is clicked:
How do I do that? Nothing happens when I click the button.
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 (not my code) that I tried to reproduce.
解决方案
Your code will work if you define singleQuestionModule and remove the inline-event.
NOTE : If you want the radio button click event to be attached to the new created questions you need to use event delegation .on() like :
$("body").on("click", "#radioAddQuestion", function() {
Code:
$("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的函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
