Jquery 内的功能未显示

Question

嘿，我有以下功能，我想通过单击按钮调用它：

(function ($) {
  $(window).load(function() { 
     $("#status").fadeOut();
     $("#preloader").delay(400).fadeOut("slow");
     [Lots of code here]
  });

  $(document).ready(function() {
     [Lots of code here]
  });

  [Lots of code here]

  function testing() {
     $("#status").fadeIn();
     $("#preloader").delay(400).fadeIn("slow");
  }

  [Lots of code here]
}(jQuery));

我得到的错误是：

未捕获的引用错误：未定义测试

我使用的按钮HTML是：

<button value="TEST" onClick="testing();">test</button>

当我尝试将 testing() 代码放在的 (function ($) { }( jQuery)); 它没有找到 status 和 preloader 的值有下面的错误在 $("#status").fadeIn(); 行：

未捕获类型错误：未定义不是函数

我知道问题出在 (function ($) { }(jQuery)); 但我不确定如何才能做到调用它，因为这不是我的代码。

Answer 1

发生这种情况是因为 testing 在 jQuery 范围内。您的代码应如下所示：

function testing() {
   jQuery("#status").fadeIn();
   jQuery("#preloader").delay(400).fadeIn("slow");
}
(function ($) {

Answer 2

<button value="TEST" onClick="testing();">test</button>

此代码通常在全局范围内查找 testing()，在 <script> 标签内但不在任何 function/object 内的任何内容。

您的代码的问题在于您的立即调用函数表达式 (IIFE) 实际上定义了一个 testing() 函数，但无法从外部访问它，它只是 IIFE 中的一个局部变量。要使其可用，您可以 return 一些包含此功能的对象，例如

        var myApp = (function ($) {
              $(window).load(function() { 

              });

              $(document).ready(function() {

              });

              // returning the object to call from outide   
              return { 
                testing : function () {
                  alert('sdfdfd');
                  $("#status").fadeIn();
                  $("#preloader").delay(400).fadeIn("slow");
                }
              }


            }(jQuery));

您可以从按钮中这样调用它。

<button value="TEST" onClick="myApp.testing();">test</button>

这样做，您的所有函数都不会污染全局命名空间，您可以在该 returned 对象中定义所有函数，以便从外部调用它们。这就是大多数库使用单个全局对象公开其 API 的方式:)

Jquery 内的功能未显示

Function within Jquery not being seen

jquery

function

dom

typeerror

referenceerror