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

129

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

$(document).ready(function(){

    // jQuery code is in here

});

Я вызываю этот script из панели инструментов WordPress и загружаю его после загрузки фрейма jQuery.

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

TypeError: $не является функцией

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

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

(function($){

    // jQuery code is in here

})(jQuery);

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

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

  • 1
    Если вы наберете $ в консоли и нажмете ввод - что вы видите?
  • 0
    При запуске $ в консоли я получаю "неопределенный"
Теги:
function
typeerror
wrapper

12 ответов

202
Лучший ответ

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

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

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

jQuery(function ($) { ...
Поделиться
  • 13
    или просто (function ($) {// код jQuery здесь}) (jQuery);
  • 0
    Я попробовал вторую версию, однако она не сработала, первая версия сработала, но я просто хочу убедиться, что я не удваиваюсь при вызове jQuery.
Показать ещё 4 комментария
102

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

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

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

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

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

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

Поделиться
14

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

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

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

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

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

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

Вы можете избежать конфликтов, подобных этому

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  alert("Hi this will not conflict now");
  jq('selector').show();
});
Поделиться
  • 7
    Или $ = jQuery.noConflict ();
11

Попробуйте следующее:

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

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

</script>
Поделиться
7

Вам нужно передать $in function()

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

// jQuery code is in here

});
</script>
Поделиться
  • 3
    Чем это отличается от ответа, данного выше (три года назад)?
6 
var $=jQuery.noConflict();

$(document).ready(function(){
    // jQuery code is in here
});

Кредит Ашвани Панвару и Циссоу: https://stackoverflow.com/questions/12343714/typeerror-is-not-a-function-when-calling-jquery-function

Поделиться
4

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

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

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

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

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

<head>
 <script type="text/javascript" src="/jquery.min.js"/>
 <script>
  var jq = jQuery.noConflict();
  jq(document).ready(function(){
  //.... your code here
    });
 </script>
Поделиться
1

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

jQuery(document).

вместо

$(document).

или

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

(function ($) {
   $(document).
}(jQuery));
Поделиться
1

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

Поделиться
1 
<script>
var jq=jQuery.noConflict();
(function ($) 
    {
    function nameoffunction()
    {
        // Set your code here!!
    }

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

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню