未捕获的 ReferenceError：$ 未在 Laravel 中的 http://localhost/project/public/user/1/edit:308:9 处定义 [重复]

Posted 2023-03-14

技术标签:

【中文标题】未捕获的 ReferenceError：$ 未在 Laravel 中的 http://localhost/project/public/user/1/edit:308:9 处定义 [重复]【英文标题】：Uncaught ReferenceError: $ is not defined at http://localhost/project/public/user/1/edit:308:9 in Laravel [duplicate] 【发布时间】：2017-04-09 15:03:21 【问题描述】：

jQuery

<script src="http://localhost/project/public/plugins/jQuery/jquery-2.2.3.min.js"></script>

我的代码

<script type="text/javascript">
        function readURL(input)
          if(input.files && input.files[0])
            var reader = new FileReader();
            reader.onload=function(e)
              $('#showimages').attr('src', e.target.result);
            
            reader.readAsDataURL(input.files[0]);
          
        
        $("#inputimages").change(function()
          readURL(this);
        );
        </script>


        <img src="" id="showimages">
        <input type="file" name="images" id="inputimages">

我得到了这个错误

未捕获的引用错误：$ 未定义在http://localhost/project/public/user/1/edit:308:9

*第 308 行 -> $("#inputimages").change(function()

我是 js 和 jquery 新手，请帮我解决这个错误...

我在该部分中编写了脚本。这就是发生错误的原因，请参阅我的回答。

【问题讨论】：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 你导入了另一个库吗？是的@KelvinKyaw

&lt;script src="!! asset('plugins/jQuery/jquery-2.2.3.min.js') !!"&gt;&lt;/script&gt; &lt;script src="!! asset('bootstrap/js/bootstrap.min.js') !!"&gt;&lt;/script&gt; &lt;script src="!! asset('plugins/select2/select2.full.min.js') !!"&gt;&lt;/script&gt; &lt;script src="!! asset('plugins/slimScroll/jquery.slimscroll.min.js') !!"&gt;&lt;/script&gt; &lt;script src="!! asset('plugins/fastclick/fastclick.js') !!"&gt;&lt;/script&gt; &lt;script src="asset('plugins/datatables/jquery.dataTables.min.js')"&gt;&lt;/script&gt;

laravel中的im代码 @FauziPadLaw 我也遇到了与您使用数据表相同的问题。检查我更新的答案。 【参考方案1】：

您在页面完全加载之前运行了 JavaScript。您可以加载另一个可能已覆盖 $ 变量的插件。您的 JavaScript 文件未正确加载到您的页面中（检查您的脚本路径并尝试直接在浏览器上打开链接）。

确保所有 javascript 代码都在代码块中运行，例如：

$(document).ready(function () 
  //your code
);

或

(function($) )(jQuery);

或等效的纯 JavaScript 代码。

【讨论】：

【参考方案2】：

谢谢大家！

这个错误解决了，我必须在.blade.php laravel 中写

@section('script')
<script type="text/javascript">
//my code here
</script>
@endsection

【讨论】：

附加帮助 如果有人从 bootstrap.js 加载 jQuery（Laravel 默认为 bootstrap 预设）确保你的 app.js 脚本标签没有使用defer。跨度> 这是我没有意识到我正在为自己创造的问题。 defer 正是导致它这样做。此时 jQuery 对视图不可用。感谢您的评论！在互联网上找到

The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the html, build DOM. The script loads “in the background”, and then runs when the DOM is fully built.

从 <script src=" asset('js/app.js') "></script> 中删除 defer 效果很好【参考方案3】：

您的代码中可能存在两个潜在问题。

您不必将代码放在使用它的脚本之前。（从浏览器检查您的视图源）您可以导入另一个 jQuery 库。

如果你导入了两个不同的jQuery库，可以用noConflict()解决

例如

  <script type="text/javascript">
    j = $.noConflict();
    function readURL(input)
      if(input.files && input.files[0])
        var reader = new FileReader();
        reader.onload=function(e)
          j('#showimages').attr('src', e.target.result);
        
        reader.readAsDataURL(input.files[0]);
      
    
    j("#inputimages").change(function()
      readURL(this);
    );
  </script>

试试我更新的答案。假设你有主布局文件。

<head>
 <script src="!! asset('plugins/jQuery/jquery-2.2.3.min.js') !!"></script> 
 <script src="!! asset('bootstrap/js/bootstrap.min.js') !!"></script>
 <script src="!! asset('plugins/select2/select2.full.min.js') !!">    </script> 
 <script src="!! asset('plugins/slimScroll/jquery.slimscroll.min.js') !!"></script> 
 <script src="!! asset('plugins/fastclick/fastclick.js') !!"></script>     
 @yield('script')

<body>
    @yield('content')
     <script src="!!asset('plugins/datatables/jquery.dataTables.min.js')!!"></script> 
</body>
 </head>

【讨论】：

也不行谢谢 :) 其实我已经解决了这个错误。在 .blade.php laravel 我必须写 @section('script') <script> //code here </script> @endsection 【参考方案4】：

要使用 Jquery，请记住它必须在使用前导入

您的问题是您的 Jquery 似乎未导入。也许您的路径不正确，或者您在脚本之后导入了它。

首先，使用您的网络浏览器检查此网址http://localhost/project/public/plugins/jQuery/jquery-2.2.3.min.js。如果它存在，你会在那里看到很多 javascript 代码。

然后从本地服务器导入。

<script src="http://localhost/project/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script>
      //your script here.
</script>

使用cdn的另一种选择：

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
     //your script here
</script>

【讨论】：

我很确定 jquery 已导入并且路径可访问，但感谢您的回答:) 如果将$ 替换为jQuery 是否有效？【参考方案5】：

执行脚本时似乎没有加载 jQuery。

您应该在使用它的脚本之前加载 jQuery。

【讨论】：

以上是关于未捕获的 ReferenceError：$ 未在 Laravel 中的 http://localhost/project/public/user/1/edit:308:9 处定义 [重复]的主要内容，如果未能解决你的问题，请参考以下文章

未捕获的 ReferenceError：全局未在 eval 中定义

未捕获的 ReferenceError：jQuery 未在 eval 中定义

visual studio typescript“未捕获的ReferenceError：未在...定义导出” [重复]

未捕获的 ReferenceError：ace 未在 Angular 4 中定义

未捕获的 ReferenceError: 要求未在 app.js:3 中定义

如何修复“未捕获的 ReferenceError：Vue 未在 vuetemplatetest.2.html:19 中定义”