为什么通过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 (将#修改为@)