Конфликт jQuery: $ is not a function

327

26 октября 2017, 10:58

Консоль выдает такую ошибку:

Uncaught TypeError: $ is not a function
    at profile.php?id=1:122

Пробовал в пустом .php файле, там всё работает отлично, сделал вывод что какой-то внутренний скрипт мешает работе. $.noConflict(); не помогло. Как решить эту проблему?

PHP файл:

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="/engine/smiles/emojionearea.js"></script>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

Стили и прочие не-скриптовые записи опущены в <head>.

Все подключенные модули отвечают Response code: 200.

Сам скрипт:

<div class="box-v5 panel">
    <script type="text/javascript">
        $.noConflict();
        $(document).ready(function() { //Та самая строчка, на которую ругается консоль
            $("#emojionearea1").emojioneArea({
                pickerPosition: "left",
                tonesStyle: "bullet"
            });
        });
    </script>
    <div class="panel-heading padding-0 bg-white border-none">
    <textarea id="emojionearea1">Default :smile:</textarea>

Answer 1

Дабы избежать конфликта с $, можно воспользоваться таким вариантом:

jQuery(document).ready(function($) {
    //использование jQuery как $
}

Объект jQuery передаётся в функцию, вызываемую при document.ready, в качестве первого параметра. Так как параметру можно задать любое имя, то для этого вполне подойдёт $. А так как это локальная переменная (параметр), то при использовании $ внутри функции браться будет она, а не глобальная переменная $ (которая где-то в коде была заменена с jQuery на что-то другое).

Аналогично для "короткого" варианта document.ready:

jQuery(function($) {
    //использование jQuery как $
});

При использовании вне document.ready:

(function($) {
    //использование jQuery как $
})(jQuery);

Answer 2

Ваша проблема в том, что вы всунули скрипт в какой-то блок, и в этом скрипте пытаетесь взаимодействовать с элементом, которого ещё нет(#emojionearea1). Положите ваш скрипт в конец страницы. Или хотябы после вашего
<textarea id="emojionearea1">Default :smile:</textarea> 