如何解决为什么通过Ajax加载div删除第一个表单标签而不触发jQuery?
我在页面的某个区域允许删除文件。它列出了文件名,每个文件名旁边都有一个删除按钮。单击该按钮将对cfc进行Ajax调用,以删除该文件,然后使用删除的文件重新加载带有列表的区域。
当我第一次加载页面时,一切正常。重新加载区域后,列表中的第一项目缺少周围的表单标签,单击按钮将重新加载页面。后续项目具有表单标签,但仍将重新加载页面。这是我的主页代码:
<div id="uploadedFiles"><cfinclude template="/includes/list-uploaded-files.cfm"></div>
这是list-uploaded-files.cfm的代码:
<cfdirectory action="list" directory="#Expandpath('/applicant-uploads/' & SESSION.grantID)#" listinfo="name" name="qGetUploads">
<cfif qGetUploads.RecordCount GT 0>
<table class="table table-hover">
<cfoutput query="qGetUploads">
<cfset documentPath = "../applicant-uploads/" & SESSION.grantID & "/" & name>
<tr>
<td>
<a href="#documentPath#" target="_blank">#name#</a>
</td>
<td class="text-right deleteFormContainer">
<form>
<input name="documentPath" type="hidden" value="#documentPath#" />
<button class="btn btn-warning btn-sm submitFileDelete">delete</button>
</form>
</td>
</tr>
</cfoutput>
</table>
<cfelse>
<p>No supporting documents have been uploaded.</p>
</cfif>
这是Ajax的jQuery:
////////////////////////////////////////////////////////////////////////////////////////////
// DELETE DOCUMENT
////////////////////////////////////////////////////////////////////////////////////////////
$(".submitFileDelete").on("click",function(){
event.preventDefault();
var form = $(this).closest("td").find("form");
var formData = $(form).serialize();
console.log(formData);
$.ajax({
type: "POST",url: "/cfc/documents.cfc?method=deleteDocument",data: formData,dataType: "text",beforeSend:function(){
return confirm("Are you sure you want to delete this file?");
},success: function(data,status) {
$("#uploadedFiles").load('/includes/list-uploaded-files.cfm');
console.log(status);
console.log(data);
}
});
});
是否有一些我想通过Ajax加载CF页面的东西?谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。