javascript - AjaxSubmit 不是 DOM 重新加载的函数

Question

我有下面的代码。

$('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; 
});

本质上我在这里所做的是

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

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

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

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

error: function () {

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

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

Answer 1

我的钱花在以下方面:

在您的 HTML 请求中:

//从 url 获取标记并替换表单标记...

您正在加载包含 jQuery 库的完整页面。当您执行此操作时，HTML 响应中的新 jQuery 脚本将被下载、解析和执行，并且它将覆盖当前的 jQuery 原型(prototype)，这意味着 jQuery.ajaxSubmit 不再可访问。

很聪明吧？

解决此问题的最佳方法是不请求包含 jQuery 脚本的完整页面，而是请求仅包含所需 DOM 结构的 URL，而不是包含页眉、页脚、脚本的完整页面，等等