Функция в Jquery не видна

Привет всем, у меня есть следующая функция, которую я пытаюсь вызвать нажатием кнопки:

(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));

Ошибка, которую я получаю:

Uncaught ReferenceError: тестирование не определено

HTML кнопки, которую я использую:

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

Когда я пытаюсь разместить код testing() снаружи (function ($) { }(jQuery)); он не находит значения для status и preloader с ошибкой ниже в строке $("#status").fadeIn();:

Uncaught TypeError: undefined is not a function

Я знаю, что проблема связана с (function ($) { }(jQuery));, но я не знаю, как это сделать, поскольку это не мой код.


function jquery dom typeerror referenceerror
person StealthRT    schedule 29.01.2015    source источник
comment
вам нужно определить функцию в разделе заголовка/до того, как кнопка dom будет загружена.   -  person Milind Anantwar    schedule 29.01.2015
comment
Вам нужно прекратить использовать встроенные обработчики событий, проблема решена!   -  person adeneo    schedule 29.01.2015
comment
когда вы размещаете testing() снаружи, вы получаете необработанную ошибку при нажатии кнопки, не так ли?   -  person Arkantos    schedule 29.01.2015

Ответы (2)


arrow_upward
1
arrow_downward

Это происходит потому, что testing находится внутри области видимости jQuery. Ваш код должен выглядеть так:

function testing() {
   jQuery("#status").fadeIn();
   jQuery("#preloader").delay(400).fadeIn("slow");
}
(function ($) {
person antyrat    schedule 29.01.2015
comment
Выполнение этого таким образом вызывает Uncaught TypeError: undefined is not a function в #status, как я сказал в своем OP. - person StealthRT; 29.01.2015
comment
@StealthRT вы используете $("#status").fadeIn(); или jQuery("#status").fadeIn();, как я предложил? - person antyrat; 29.01.2015
comment
Вау извини. Проглядел тот. Это работает, когда я использую jQuery(...). Спасибо! - person StealthRT; 29.01.2015

arrow_upward
0
arrow_downward 

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

Этот код обычно ищет testing() в глобальной области видимости, что-нибудь в пределах <script>tags, но не внутри какой-либо функции/объекта.

Проблема с вашим кодом заключается в том, что ваше немедленно вызываемое функциональное выражение (IIFE) фактически определяет функцию testing(), но нет никакого способа получить к ней доступ извне, это просто локальная переменная внутри этого IIFE. Чтобы сделать его доступным, вы можете вернуть некоторый объект, содержащий эту функцию, например

        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>

Делая это, вы не будете загрязнять глобальное пространство имен всеми своими функциями, вы можете определить все свои функции в этом возвращаемом объекте, чтобы вызывать их извне. Именно так большинство библиотек предоставляют свой API с помощью одного глобального объекта :)

person Arkantos    schedule 29.01.2015