下面的代码是使用Blueimp的jQuery FileUpload实现文件上传。该代码是部分代码，是 .Net Core 项目中视图的一部分。代码按预期工作正常。
<!-- The file upload form used as target for the file upload widget -->
<form class="fileupload" method="POST" enctype="multipart/form-data">
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div id="divFileButtons" class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-tertiary btn-min-width fileinput-button">
<i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
<span>Add files...</span>
<input title="File uploader" type="file" name="files[]" multiple>
</span>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<div style="padding-bottom:8px">Documents uploaded or selected for upload will appear in the section below.</div>
<table id="tblFiles" role="none" class="table table-striped">
<tbody class="files"></tbody>
</table>
</form>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload" aria-hidden="true"></i>
<span>Upload</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle" aria-hidden="true"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
{% if (!file.extra) file.extra = { originalName: file.name }; %}
<tr class="template-download fade">
<td>
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.extra.originalName%}" download="{%=file.name%}">{%=file.extra.originalName%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
{% if (file.deleteUrl) { %}
<div hidden>
<button type="button" hidden id="{%=file.name.replaceAll('.','').replaceAll(' ','').replaceAll('#','').replaceAll('$','').replaceAll('!','').replaceAll('`','').replaceAll('~','').replaceAll('$','').replaceAll('^','').replaceAll('&','').replaceAll('(','').replaceAll(')','').replaceAll('[','').replaceAll(']','').replaceAll('{','').replaceAll('}','').replaceAll(';','').replaceAll(',','').replaceAll('%','').replaceAll('+','').replaceAll('@@','').replaceAll('=','').replaceAll('\'','')%}" name="{%=file.name%}" class="btn btn-severe delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}" {% if (file.deletewithcredentials) { %} data-xhr-fields='{"withCredentials":true}' {% } %}>
</button>
</div>
<a title="Delete document" name="deleteDocument" href="#" class="btn btn-severe deleteDocument" data-id="{%=file.name.replaceAll('.','').replaceAll(' ','').replaceAll('#','').replaceAll('$','').replaceAll('!','').replaceAll('`','').replaceAll('~','').replaceAll('$','').replaceAll('^','').replaceAll('&','').replaceAll('(','').replaceAll(')','').replaceAll('[','').replaceAll(']','').replaceAll('{','').replaceAll('}','').replaceAll(';','').replaceAll(',','').replaceAll('%','').replaceAll('+','').replaceAll('@@','').replaceAll('=','').replaceAll('\'','')%}" data-name="{%=file.name%}" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}" >
<i class="glyphicon glyphicon-trash color-confirm-red" aria-hidden="true"></i>
<span>Delete</span></a>
@*<input type="checkbox" name="delete" value="1" class="toggle">*@
{% } else { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle" aria-hidden="true"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
在特定页面中，我希望隐藏添加新文件和删除现有文件按钮。这是我的 jquery 代码。添加新文件的隐藏工作正常，但删除文件不起作用。我尝试了多种方法但不起作用。我错过了什么？
$(document).ready(function() {
//This code works.
$('.fileupload').find("#divFileButtons").hide();
//None of these above codes work.
$('.fileupload').find('.deleteDocument').hide();
$('.fileupload .deleteDocument').hide();
$(document).find('.fileupload .deleteDocument').hide();
$('#tblFiles').find('.deleteDocument').hide();
$('#tblFiles .deleteDocument').hide();
$(document).find('#tblFiles .deleteDocument').hide();
$('.deleteDocument').hide();
}
我将在这里进行一些猜测，因为所提供的代码并不能真正重现问题，我也没有完整渲染的 HTML。
假设渲染的 HTML 确实与表单和模板匹配；考虑到我们所拥有的，这应该通过修复 jQuery 相关的 JavaScript 来工作：
$(function() {
$("#divFileButtons").hide();
$('.deleteDocument').hide();
});//the fix to the malformed code
所做的假设：
替代方案可能是放置一个自定义事件处理程序，并在所有模板代码执行完毕后触发它。
示例：放入自定义事件处理程序。
$('.fileupload').on('custom-hide',function(event){
$("#divFileButtons").hide();
$('.deleteDocument').hide();
});
现在通过模板代码执行渲染后的某个地方：
$('.fileupload').trigger('custom-hide');