使用 jQuery 我想在发生点击事件时附加整个 div。我试过了,但没用。
当用户点击 Add another image
时,我想附加整个 div 标签及其所有元素。
这是我的代码:
<form method="post" id="form_property" enctype="multipart/form-data">
<div class="row">
<div class="span4" id="image">
<h3><strong>4.</strong> <span>Add Images to your Property</span></h3>
<div class="fileupload fileupload-new control-group" data-provides="fileupload">
<label class="control-label" for="inputPropertyPrice">Image files</label>
<div class="input-append">
<div class="uneditable-input"> <i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div> <span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" name="files1" accept="image/*" />
</span>
</div>
</div>
</div>
<!-- /.span4 -->
</div>
<!-- /.row -->
<br/> <a id="another_image" class="btn btn-primary btn-small list-your-property" href="#">Add Another Image</a>
<br/>
<br/>
<input type="submit" name="submit" value=" Save images " class="btn btn-primary btn-large" style="float: left; width: 370px; height: 50px; margin-top: 10px">
</form>
Jquery
<script type="text/javascript">
$(document).ready(function(){
var count = 2;
$('#another_image').click (function(){
if(count < 7){
$('<br/><br/>
<div class="input-append">
<div class="uneditable-input">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" name="files'+ count +'" accept="image/*" />
</span>
</div>
').appendTo ("#image");
count++;
}
});
});
</script>
有人可以帮我解决这个问题吗?
最佳答案
使用 .appendTo()
和 clone()
。
如果您不使用 clone()
,相同的 div 将被替换,目标中的任何内容都不会更新。您无需键入/复制整个 html。
Syntax :
$(Element_Selector).appendTo(TargetSelector)
.
$($('.input-append').first().clone()).appendTo("#image");
*注意:克隆现有的 html 可能会创建重复的 ID。照顾好它。
关于javascript - 使用 jquery 附加一个完整的 div 及其所有元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29739781/