AjaxSubmit 不是 DOM 重新加载的函数答案

【问题标题】：AjaxSubmit is not a function on DOM reloadAjaxSubmit 不是 DOM 重新加载的函数
【发布时间】：2023-03-03 15:00:02
【问题描述】：

我在下面有这段代码。

$('body').on('submit', '.some-form', function (event) {
    $(this).ajaxSubmit({
        dataType: 'json',
        success: function (data, statusText, xhr, form) {
            var url = 'some/url';

            // Reload the form markup/DOM using the response
            $.ajax({
                dataType: 'html',
                type: 'get',
                url: url
            }).done(function (html) {
                // get markup from url and replace the form markup ...    
            });
        },
        error: function () {
            alert('error');
        }
    });

    return false; 
});

基本上我在这里做的是

提交并处理表单
得到结果
如果成功，从页面获取新的表单标记，然后替换当前的表单标记。如果失败，显示错误

现在，因为我将提交事件委托给正文，所以应该没有问题处理新加载的表单标记上的提交。

函数处理程序工作正常，直到我看到这个错误

TypeError: $(...).ajaxSubmit is not a function

error: function () {

知道为什么会这样吗？这意味着 ajaxSubmit 不存在但我没有重新加载页面。

编辑：是的，我正在使用jquery form plugin

【问题讨论】：

你加载了 jQuery 表单插件了吗？
malsup.com/jquery/form
确实，我的想法是 ajaxSubmit 函数的来源。
为什么需要ajaxsubmit？ Jquery Ajax 可以做到以上。
@STEEL 因为我需要通过 Ajax 上传文件。

标签： javascript jquery forms ajaxform

【解决方案1】：

我的钱在以下方面：

在您对 HTML 的请求中：

// get markup from url and replace the form markup ...

您正在加载一个包含 jQuery 库的完整页面。当您这样做时，HTML 响应中的新 jQuery 脚本将被下载并解析并执行，它将覆盖当前的 jQuery 原型，这意味着 jQuery.ajaxSubmit 不再可访问。

很聪明，嗯？

解决这个问题的最佳方法是简单地不请求包含 jQuery 脚本的整个页面，而是请求一个只包含您想要的 DOM 结构的 URL，而不是包含页眉、页脚、脚本、等等。

【讨论】：

在我看来，我已经在这样做了。我调用的页面不包含无关数据，例如页眉、页脚或布局。
好的，但是我可以向您保证，如果您查看网络选项卡，那么您会在第一次执行请求后看到正在下载的新 jQuery 脚本。试试这个，console.log($) 和 console.log($.fn) 在你的 $(this).ajaxSubmit() 之前 - 第一次你会看到 ajaxSubmit 是 $.fn 对象的方法，第二次你不会，但是当你 @ 987654327@ 看起来应该是一样的。这意味着您的 $.fn 在第一个请求之后但在第二个请求之前被覆盖，这意味着 $.ajaxSubmit 将不再可访问。