TypeError: $ не является функцией при вызове функции jQuery

214

У меня есть простой скрипт jQuery в плагине WordPress, который использует обертку jQuery, как это:

$(document).ready(function(){

    // jQuery code is in here

});

Я вызываю этот скрипт из панели управления WordPress и загружаю его ПОСЛЕ загрузки инфраструктуры jQuery.

Когда я проверяю страницу в Firebug, я постоянно получаю сообщение об ошибке:

Ошибка типа: $ не является функцией

$ (Документ) .ready (функция () {

Должен ли я обернуть скрипт в эту функцию:

(function($){

    // jQuery code is in here

})(jQuery);

У меня была эта ошибка довольно много раз, и я не уверен, как с ней справиться.

Любая помощь будет принята с благодарностью.

Джейсон
источник
3
Если вы наберете $в консоли и нажмете ввод - что вы видите?
zerkms
Когда я запускаю $ в консоли, я получаю "undefined"
Jason

Ответы:

321

По умолчанию, когда вы ставите jQuery в очередь в Wordpress, вы должны его использовать jQuery, и $он не используется (это для совместимости с другими библиотеками).

Ваше решение оборачивать это functionбудет работать нормально, или вы можете загрузить jQuery другим способом (но это, вероятно, не очень хорошая идея в Wordpress).

Если вы должны использовать document.ready, вы можете перейти $к вызову функции:

jQuery(function ($) { ...
Таблетки взрыва
источник
Я попробовал вторую версию, однако она не сработала, первая версия сработала, но я просто хочу убедиться, что я не удваиваюсь при вызове jQuery.
Джейсон
@ Джейсон, тебе это даже не нужно; как раз то, что я написал: jsfiddle.net/vcbYJ
таблетки для взрыва
Не могли бы вы смотрите на этот вопрос wordpress.stackexchange.com/questions/214858/...
И если какой-то селектор находится снаружи jQuery(function ($) { ..., вы должны использовать jQueryвместо$
Миша Рудрастых
Спасибо брат.
Цените
154

Это должно исправить это:

jQuery(document).ready(function($){
  //you can now use $ as your jQuery object.
  var body = $( 'body' );
});

Проще говоря, WordPress запускает свои собственные сценарии раньше, чем вы, и они выпускают $var, чтобы он не конфликтовал с другими библиотеками. Это имеет смысл, поскольку WordPress используется для всех видов веб-сайтов, приложений и, конечно, блогов.

Из их документации:

Библиотека jQuery, включенная в WordPress, установлена ​​в режим noConflict () (см. Wp-includes / js / jquery / jquery.js). Это сделано для предотвращения проблем совместимости с другими библиотеками JavaScript, на которые может ссылаться WordPress.

В режиме noConflict () глобальный ярлык $ для jQuery недоступен ...

Мэтью Бланкарт
источник
28

Это решение сработало для меня

;(function($){
    // your code
})(jQuery);

Переместите свой код в замыкание и используйте $вместоjQuery

Я нашел вышеуказанное решение в /magento/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma

... после поиска слишком много

Бикрам Шреста
источник
2
Фантастическое решение. Основная причина этого работает потому, что ";" закрывает любой другой экземпляр jquery, который уже активен, и в то же время он объявляет еще один новый локально. Если у вас есть всего несколько секунд, чтобы реализовать макет в рабочей среде, или когда запущено множество плагинов WordPress, это может сделать это замечательно. Но имейте в виду, что вы должны решить проблему, это всего лишь пластырь, но если это информационная страница, то все в порядке.
Луис
@ Марта Джеймс Это работает для меня, так что включил его. Это может или не может работать для других
Бикрам Shrestha
19

Вы можете избежать конфликта, как это

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  alert("Hi this will not conflict now");
  jq('selector').show();
});
Ашвани Панвар
источник
7
Или $ = jQuery.noConflict ();
Cyssoo
13

Попробуй это:

<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
    jQuery.noConflict();
    (function ($) {
        function readyFn() {
            // Set your code here!!
        }

        $(document).ready(readyFn); 
    })(jQuery);

</script>
Хосе Карлос Рамос Карменатес
источник
8

Вы должны передать $ в функции ()

<script>
jQuery(document).ready(function($){

// jQuery code is in here

});
</script>
Джитендра Дамор
источник
3
Чем это отличается от ответа, данного выше (три года назад)?
июня
8

заменить $знак jQuery следующим образом:

jQuery(function(){
//your code here
});
Макси Хан
источник
7

Дважды проверьте ваши ссылки JQuery. Возможно, вы либо ссылаетесь на него более одного раза, либо вызываете свою функцию слишком рано (до того, как будет определен jQuery). Вы можете попробовать, как упомянуто в моих комментариях, и поместить любую ссылку на jQuery вверху вашего файла (в заголовке) и посмотреть, поможет ли это.

Если вы используете инкапсуляцию jQuery, это не поможет в этом случае. Пожалуйста, попробуйте, потому что я думаю, что это красивее и очевиднее, но если jQuery не определен, вы получите те же ошибки.

В конце ... jQuery в настоящее время не определен.

Рагхул Манохаран
источник
Я думаю, что вместо того, чтобы что-то пытаться получить доступ к JQuery до того, как оно будет определено, что, в свою очередь, нарушает все. Попробуйте переместить scriptссылки JQueryна верхнюю часть, index.htmlи это, вероятно, сработает
Дан Молдаван
Этот ответ нуждается в большей наглядности. Да, остальные действительны, если стандартное пространство имен занято с версией jQuery, загруженной через какой-то другой плагин. Но убедитесь, что вы не случайно (и, возможно, излишне) загружаете jQuery более одного раза.
edkay
5

использование

jQuery(document).

вместо того

$(document).

или

Внутри функции $ указывает на jQuery, как и следовало ожидать

(function ($) {
   $(document).
}(jQuery));
Санджай
источник
4

Что сработало для меня. Первая библиотека для импорта - это библиотека запросов, которая затем вызывает метод jQuery.noConflict ().

<head>
 <script type="text/javascript" src="jquery.min.js"/>
 <script>
  var jq = jQuery.noConflict();
  jq(document).ready(function(){
  //.... your code here
    });
 </script>
PbxMan
источник
4
(функция ($) {
  «использовать строгое»;

  $ (function () {

    // Ваш код здесь

  });

} (JQuery));
Шариф Мухаммед Юнус
источник
3
<script>
var jq=jQuery.noConflict();
(function ($) 
    {
    function nameoffunction()
    {
        // Set your code here!!
    }

    $(document).ready(readyFn); 
    })(jQuery);

теперь используйте jq вместо jQuery

Аман бирджпурия
источник
3

Вы сталкиваетесь с этой проблемой, когда имя вашей функции и одно из имен идентификаторов в файле совпадают. просто убедитесь, что все ваши имена в файле уникальны.

Лаксман Джейгонде
источник
2

Ты можешь использовать

jQuery(document).read(function(){ ... });

или

(function ($) { ... }(jQuery));
Бхавеш Балар
источник