laravel的jQuery加载问题,附注:延迟已删除,仍然存在问题

时间:2019-05-22 08:59:40

标签: jquery laravel webpack

Deleted jquery still shows on the top of DOM before HTML (jquery link is defined in head section though), thus
ReferenceError: $ is not defined
  • 我已添加 “ http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js” 头部标签之间
  • 已从     {{asset('js / app.js')}}
  • 我的自定义JS之前已添加到mix.js中
  • 每次加载页面时,自定义js都会在DOM顶部显示,甚至在html标记之前。

    参考错误:未定义$显示

  • 我已经从webpack.mix.js中删除了自定义js文件

  • 每次加载页面时,即使在html标记之前,旧的已删除的jquery仍显示在DOM的顶部

    参考错误:未定义$显示

    p.s:运行php artsan serve和npm运行dev并从.storage / framework / views中删除先前的视图文件

app.js

require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
    el: '#app',
});

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

DOM

<script type="text/javascript">
    $(document).ready(function() {
        $(".btn-success").click(function(){
            var html = $(".clone").html();
            $(".increment").after(html);
        });

        $("body").on("click",".btn-danger",function(){
            $(this).parents(".control-group").remove();
        });
    });
</script>
<!DOCTYPE html>
<html lang="en">
<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="JK6i5Dru1PRn5ubunzRnXUcaocEyPMXauiV5QtYE">

    <title>Laravel</title>

    <!-- Scripts -->
    <script src="http://localhost:8005/js/app.js" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="http://localhost:8005/css/app.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="http://localhost:8005">
                    Laravel
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <!-- Authentication Links -->
                                                    <li class="nav-item">
                                <a class="nav-link" href="http://localhost:8005/login">Login</a>
                            </li>
                                                            <li class="nav-item">
                                    <a class="nav-link" href="http://localhost:8005/register">Register</a>
                                </li>
                                                                        </ul>
                </div>
            </div>
        </nav>

        <main class="py-4">
            <div class="container">
                                                <div class="row">
        <div class="col">
            <form method="POST" action="http://localhost:8005/company" accept-charset="UTF-8"><input name="_token" type="hidden" value="JK6i5Dru1PRn5ubunzRnXUcaocEyPMXauiV5QtYE">
            <div class="form-group">
                <label for="name" class="control-label">Company Name</label>
                <input class="form-control input-lg" placeholder="company name" name="name" type="text" id="name">
            </div>

            <div class="form-group">
                <label for="email" class="control-label">Company Email</label>
                <input class="form-control input-lg" placeholder="company email" name="email" type="text" id="email">
            </div>

            <div class="form-group">
                <label for="website" class="control-label">Company website</label>
                <input class="form-control input-lg" placeholder="company website" name="website" type="text" id="website">
            </div>


            <h3 class="jumbotron">Laravel Multiple File upload</h3>
                <div class="input-group control-group increment">
                    <input type="file" name="filename[]" class="form-control">
                    <div class="input-group-btn">
                        <button class="btn btn-success" type="button">
                            <i class="glyphicon glyphicon-plus">Add</i>
                        </button>
                    </div>
                </div>
                <br>
                <div class="clone hide">
                    <div class="control-group input-group">
                        <input type="file" name="filename[]" class="form-control">
                        <div class="input-group-btn">
                            <button class="btn btn-danger" type="button"><i class="glyphicon glyphicon-remove"></i>Remove</button>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <input class="btn btn-info btn-lg" style="width:100%" type="submit" value="Add Company">
                </div>              

            </form>
        </div>
    </div>  

            </div>
        </main>
    </div>

</body>
</html>

0 个答案:

没有答案