无法在Laravel文件中使用jQuery
我试图在我的刀片文件中定义页面特定的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++;
});如果我查看源代码并检查web服务器上的app.js文件，就会发现jQuery已加载到app.js文件中。
回答 5
Stack Overflow用户
发布于 2018-05-05 04:28:01
Laravel默认加载jQuery，所以除非您从已编写的app.js (运行要从资产编译的npm命令)中删除它，否则它就会出现。问题是你要推迟这个脚本。在运行页jQuery后正在加载JavaScript。
尝试删除defer命令。
如果这不起作用，看看jQuery是否在您的app.js文件中。如果没有，请使用cdn或将其复制到公用文件夹。
Stack Overflow用户
发布于 2020-05-25 08:11:46
您不需要从<script src="{{ asset('js/app.js') }}" defer></script>中删除“延迟”。
然后将jquery脚本标记粘贴到app.js下面，
- 安装npm
- 删除资源/js/app.js中的vue模板
- 输入"npm run dev“并按enter键
- 重复3次2次
则不会出现Uncaught ReferenceError: $ is not defined
Stack Overflow用户
发布于 2020-05-28 13:40:05
是的，我添加了jquery脚本标记Jquery脚本标记。
https://stackoverflow.com/questions/50185203
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号