加载覆盖在 JSFiddle 中工作，但不在 Laravel 中答案

【问题标题】：Loading overlay working in JSFiddle, but not in Laravel加载覆盖在 JSFiddle 中工作，但不在 Laravel 中
【发布时间】：2017-11-14 22:24:37
【问题描述】：

我有这个简单的blade.php，代码如下：

<script type="javascript">
    $("#loading-button").click(
        function () {
                $("#loading-overlay").show();
        }
    );
</script>

<style type="text/css">

    #loading-screen {
        background: url({{asset('storage/loading.gif')}}) center center no-repeat;
        height: 100%;
        z-index: 20;
    }

    #loading-overlay {
        background: #e9e9e9;
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.5;
    }
</style>

<div id="loading-overlay">
    <div id="loading-screen"> LOADING...  </div>
</div>

在另一个布局中，我正在加载 jquery-3.2.1，在我的主页中，我正在扩展主布局（加载 jquery 的位置）并从上方包括 loading 布局。页面源码渲染后是这样的（Chrome页面源码）：

<script type="javascript">
    $("#loading-button").click(
        function () {
                $("#loading-overlay").show();
        }
    );
</script>

<style type="text/css">

    #loading-screen {
        background: url(http://localhost:8000/storage/loading.gif) center center no-repeat;
        height: 100%;
        z-index: 20;
    }

    #loading-overlay {
        background: #e9e9e9;
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.5;
    }
</style>

<div id="loading-overlay">
    <div id="loading-screen"> LOADING...  </div>
</div>
<button id="loading-button">TEST</button>

如果我将代码复制粘贴到JSFiddle，它可以工作。它没有图像，但这不相关，因为它存储在本地，但覆盖显示如预期。

主布局中有这个：

<script src="http://localhost:8000/js/jquery-3.2.1.min.js"></script>
<script src="http://localhost:8000/js/bootstrap.min.js"></script>

控制台错误：

bootstrap.min.js:7 Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
    at bootstrap.min.js:7
    at bootstrap.min.js:7
    at bootstrap.min.js:7

【问题讨论】：

您需要将您的 jQuery 代码放入 document.ready 事件处理程序中：$(function() { /* your code here... */ }); Voting to close as a typo
您是否在此之上添加了 jQuery 脚本？
控制台有错误吗？
@GovindSamrow 是的，jquery 在 bootstrap.js 之前加载
首先解决这个问题：stackoverflow.com/questions/34567939/…

标签： jquery html laravel

【解决方案1】：

如果我将代码复制粘贴到 JSFiddle 中，它可以工作。它没有图像，但这不相关，因为它存储在本地，但覆盖显示如预期。

你可以试试：

你需要在你的脚本js中在jquery之后添加源代码
在blade.php 中，我看到你到处添加代码，所以错了。您可以将 css、js 添加到 Blade.php 中，但您需要在 jquery lib 之后添加。 => 使用 laravel：使用块或 @stack('...')

演示：

布局：

<script src="jquery.js" type="text/javascript"></script>
@stack('jsfile')

刀片：

<div id="loading-overlay">
    <div id="loading-screen"> LOADING...  </div>
</div>
<button id="loading-button">TEST</button>

@push('jsfile')
<script type="javascript">
    $("#loading-button").click(
        function () {
                $("#loading-overlay").show();
        }
    );
</script>
@endpush

css 相同

希望对你有帮助。

谢谢

【讨论】：