来自另一个 js 文件的 JQuery 验证器调用函数答案

【问题标题】：JQuery validator call function from another js file来自另一个 js 文件的 JQuery 验证器调用函数
【发布时间】：2021-08-05 01:29:15
【问题描述】：

我正在使用 jquery 验证器插件 jqueryvalidation 并且在从另一个 js 文件调用函数时遇到一些问题。

在theme.js 文件中，我有一个调用预加载器的函数：

jQuery(document).ready(function ($) {

    function loadAnimation() {
      $("#loader").show().animate({
        opacity: 1
      })
    }
});

我在函数中创建它的原因是我可以从不同的操作和按钮提交调用函数。现在我想从验证器中调用该函数，但出现未定义错误，这是位于另一个文件 validator.js

中的验证器

jQuery(document).ready(function ($) {

$( "#createForm" ).validate( {
        errorClass: 'text-danger',
        rules: {
            offers: 'required',
            title: 'required',
       },
       submitHandler: function(form) {
            loadAnimation();
            form.submit();
       },
    } );
});

现在表单提交工作，这意味着 submitHandler 工作，但我收到错误 loadAnimation() is not defined。

我确保jquery、theme.js 在validator.js 之前加载，所以我可能在这里遗漏了一些东西，但我不知道是什么以及如何使loadAnimation() 在submitHandler 函数内部工作。

【问题讨论】：

loadAnimation 是否定义在 theme.js 文件的根级别？如果它在另一个函数或对象中，它将被限制。
哦，对不起，我要纠正那个。
听起来像是一个范围界定问题——如果是这样，这可能会解决您的问题：stackoverflow.com/a/29182664/1772933

标签： javascript jquery validation

【解决方案1】：

这是 cmets 中指出的范围界定问题。为了实现你想要的，你可以在 ready 函数之外提取函数定义以在其他文件中使用它。

function loadAnimation() {
  $("#loader").show().animate({ opacity: 1 })
}

jQuery(document).ready(function($) {
  // code that needs to fire when the page is ready
});

但这会污染全局命名空间，因此要解决这个问题，您需要考虑从其他模块创建模块和importing 函数。

【讨论】：