Невозможно использовать jQuery в файле Laravel Blade
Я пытаюсь определить Javascript для моей страницы в моем файле лезвия, определив для него отдельный раздел в файле. Я могу добавить тот же код jQuery в файл app.js, и он работает без проблем, но когда я помещаю его в файл лезвия, я получаю сообщение об ошибке
Uncaught ReferenceError: $ is not defined
Файл макета - app.blade.php
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<meta name = "csrf-token" content = "{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<script src = "{{ asset('js/app.js') }}" defer></script>
<link rel = "dns-prefetch" href = "https://fonts.gstatic.com">
<link href = "{{ asset('css/app.css') }}" rel = "stylesheet">
</head>
<body class = "fixed-nav sticky-footer bg-dark" id = "page-top">
<!-- Navigation-->
<nav class = "navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id = "mainNav">
<!-- Nav Stuff -->
</nav>
<!-- End Navigation -->
<!-- Body -->
<div class = "content-wrapper">
<div class = "container-fluid">
@yield('content')
</div>
<footer class = "sticky-footer">
<!-- footer stuff -->
</footer>
</div>
@yield('script')
</body>
</html>
Страница содержимого - page1.blade.php
@extends('layouts.app')
@section('content')
<div class = "container">
<!-- Page Stuff -->
</div>
@endsection
@section('script')
<script>
$(document).ready(function()
{
alert('hello world');
});
</script>
@endsection
Я бы предпочел не помещать весь свой Javascript в один файл app.js, я хотел бы иметь возможность нормально использовать этот раздел. Прямой Javascript здесь отлично работает, а jQuery - нет.
редактировать:
Вот файл app.js, который включает библиотеку jQuery.
require('jquery');
require('./bootstrap');
require('jquery-easing');
// Administration Controller - Add System Type -> This code works just fine.
var numSysDataRows = 5;
$('#add-customer-information').click(function()
{
$('#system-customer-information').append('<div class = "form-group"><label for = "col'+numSysDataRows+'">System Data:</label><input type = "text" name = "col[]" id = "col'+numSysDataRows+'" class = "form-control" /></div>');
numSysDataRows++;
});
Если я посмотрю на исходный код и проверю файл app.js с веб-сервера, я действительно вижу, что jQuery загружен в файл app.js.
Кажется, в вашем клинке нет загрузки jquery.js
Jquery загружен в мой файл app.js. Нужно ли мне загружать его второй раз на главной странице?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Laravel загружает jQuery по умолчанию, поэтому он будет там, если вы не удалите его из своего собранного app.js (выполняя команды npm для компиляции из ваших ресурсов). Проблема в том, что вы откладываете этот сценарий. jQuery загружается после запуска JavaScript страницы.
Попробуйте удалить команду defer.
Если это не сработает, посмотрите, есть ли jQuery в вашем файле app.js. Если нет, используйте компакт-диск или скопируйте его в общую папку.
Я отредактировал вопрос, чтобы показать файл app.js. Он загружает jQuery (и да, я его скомпилировал). Где команда "отложить"?
Удалите из: <script src = "{{ asset('js/app.js') }}" defer></script>
Вам не нужно удалять "defer" из <script src = "{{ asset('js/app.js') }}" defer></script>.
Вставьте теги сценария jquery ниже app.js, затем
- установить npm
- удалить шаблон vue в resouces / js / app.js
- введите "npm run dev" и нажмите Enter.
- повторить №3 2 раза
Тогда никакого Uncaught ReferenceError: $ is not defined не появится
Да, я добавил теги скрипта jquery Теги скрипта jquery
Так где же в коде включен источник jquery?