我有下面的代码,当“浏览”单击时,我想将相同的内容放在div“projectidAppe”中,并将“浏览”更改为“删除”按钮。我已经做到了这一点使用下面的jQuery的,如何使用jQuery添加多个时间到一个div?
$(document).on("change", "#idProjectTitle", function(e) {
var datatoappend = ' <div class="form-group file-uploader"><div class="input-group col-xs-12"><span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span><input type="text" id="txtProjectTitle" style="height: 35px !important" class="form-control input-lg" disabled placeholder="Upload Image"><div class="input-group-btn"><div class="browse btn btn-primary"><i class="glyphicon glyphicon-search"></i> Browse<input type="file" accept="image/*" id="idProjectTitle" multiple="multiple" name="fileUploadphoto" class="file"></div></div></div></div>';
$("#txtProjectTitle").attr('placeholder', $(this).val().split('\\').pop());
var btnDelete = '<div id="idImgDelete" class="browse btn btn-primary">Delete</div>';
$('#clearbtn').html('');
$('#clearbtn').append(btnDelete);
$("#projectidAppe").append(datatoappend);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="exampleInputEmail1">Project Photos</label>
<div class="form-group file-uploader">
<div class="input-group col-xs-12">
<span class="input-group-addon">
<i class="glyphicon glyphicon-picture"></i>
</span>
<input type="text" id="txtProjectTitle" style="height: 35px !important" class="form-control input-lg" disabled placeholder="Upload Image">
<div id="clearbtn" class="input-group-btn">
<div class="browse btn btn-primary">
<i class="glyphicon glyphicon-search"></i> Browse
<input type="file" accept="image/*" id="idProjectTitle" multiple="multiple" name="fileUploadphoto" class="file">
</div>
</div>
</div>
</div>
但现在,没有发生分别txtProjectTitle
的placeholder
内的每个图像的名称。文件上传后,如何显示每一个删除按钮以及如何删除一行时点击删除按钮?
重复'id'属性是无效的HTML。改为使用类名称。并且,由于您动态添加元素,因此您需要使用[事件委托](https://learn.jquery.com/events/event-delegation/) –