如何在jquery validation的submitHandler中调用其他JS文件的函数

你遇到的报错是函数作用域限制导致的：loadAnimation定义在theme.js的jQuery(document).ready回调函数内部，属于该闭包的局部函数，仅能在这个回调内部访问，其他JS文件的代码无法直接调用，和脚本加载顺序无关。

方案1：挂载到全局window对象（快速可用） #

直接修改theme.js的代码，把函数挂载到全局window对象上，所有文件都可以直接访问：

jQuery(document).ready(function ($) {
    // 将函数挂载到window，变为全局可调用
    window.loadAnimation = function () {
      $("#loader").show().animate({
        opacity: 1
      })
    }
});

修改完成后validator.js里的调用逻辑不需要做任何改动，即可正常执行。

方案2：自定义全局命名空间（更规范，避免全局污染） #

如果项目中有多个需要跨文件调用的公共函数，推荐用自定义命名空间的方式管理，避免全局变量冲突：

1. 修改theme.js代码：

// 初始化全局命名空间，已存在则复用，避免重复覆盖
window.MyUtils = window.MyUtils || {};

jQuery(document).ready(function ($) {
    MyUtils.loadAnimation = function () {
      $("#loader").show().animate({
        opacity: 1
      })
    }
});

2. 修改validator.js里的调用代码：

submitHandler: function(form) {
    // 从命名空间调用方法
    MyUtils.loadAnimation();
    form.submit();
}

你的两个脚本的逻辑都包裹在jQuery(document).ready回调中，已经保证了调用函数时#loaderDOM节点已经加载完成，不会出现节点找不到的问题。

内容的提问来源于stack exchange，提问作者lonerunner