微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

为什么通过Ajax加载div删除第一个表单标签而不触发jQuery?

如何解决为什么通过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 举报,一经查实,本站将立刻删除。