Materialise 周期性 JS 错误

Question

我正在为我工作的公司开发一个网站，这次我选择使用 Materialise CSS 作为 UI 框架来开发它。它看起来非常好，我喜欢它的功能，尽管我有一个主要问题。周期性错误！这意味着，当我加载网站时，有时会出现 js 错误。例如，我有一个名为 selectDatabase 的下拉列表（这是我定义的对象）。如果我重新加载页面几次，就不会发生这种情况！下拉列表已按应有的方式初始化。您知道这里可能出了什么问题吗？

项目详情：
框架：Asp.net Core 2.0 MVC

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320" />
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link type="text/css" rel="stylesheet" href="~/lib/materialize/materialize.css" media="screen,projection" />
    <link rel="stylesheet" href="~/lib/corporationtheme/css/main.css" type="text/css" media="all" />
    <link rel="stylesheet" href="~/lib/corporationtheme/css/style_guide.css" type="text/css" media="all" />
    <link rel="stylesheet" href="~/lib/corporationtheme/css/print.css" type="text/css" media="print" />
    <link rel="stylesheet" href="~/css/font-awesome-animation.min.css" type="text/css" media="all" />
    <link rel="stylesheet" href="~/css/bundle.css" type="text/css" media="all" />
    <title>AutoTest Validation</title>
</head>
<body>
    <div class="visible-print print-logo"><i class="icon-logo"></i></div>
    <div class="content-wrapper">
        <div class="mega-menu">
            <div class="container nav-top">
                <div class="row">
                    <div class="col s12">
                        <a class="logo" href="/">
                            <i class="icon-logo"></i>
                        </a>
                        <span class="logo-text">
                            <i class="icon-logo-text"></i>
                            <i class="icon-logo-text-oneline"></i>
                        </span>
                        <a href="#" class="mobile-btn menu-btn">
                            <i class="icon-mobile-menu"></i>
                        </a>
                        <div class="logo-title">
                            <div class="userDropdownWrapper">
                                <a class="dropdown-trigger" id="userDropdown" href="#!" data-target="dropdown">
                                    <img id="userpicture" src="~/images/profile.svg" class="avatar">
                                    <span id="userfirstname"></span>
                                    <svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
                                </a>
                            </div>
                            <ul id="dropdown" class="dropdown-content">
                                <li><a><i class="material-icons dropdown-icon">border_color</i>Edit Profile</a></li>
                                <li><a><i class="material-icons dropdown-icon">vpn_key</i>Sign Out</a></li>
                                <li class="divider"></li>
                            </ul>
                            <div id="databaseSelectInputField" class="input-field">
                                <select id="databaseSelect">
                                    <option value="1" selected>AutoTest</option>
                                    <option value="2">AutoTest2</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-nav">
                <div class="container">
                    <div class="row">
                        <div class="col s12">
                            <ul>
                                <li><a href="/">DashBoard</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sub-nav">
                <div class="container">
                    <div class="row">
                        <div class="col s12">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s12 sub-nav-items">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="container maincontainer" id="followMe">
                @RenderBody()
            </div>
        </div>
        <div class="footer-links">
            <ul>
                <li><a href="http://www.corporation.com">corporation.com</a></li>
                <li><a href="https://workplace.corporation.net/">Portal</a></li>
            </ul>
        </div>
    </div>
    <script>
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '/lib/corporationtheme/js/app/main.js';
        document.body.appendChild(script);
    </script>
    <script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="~/lib/materialize/materialize.js"></script>
    <script type="text/javascript" src="~/js/errorHandler/bundle.js"></script>
    <script type="text/javascript" src="~/js/shared/layout/bundle.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

JS代码：

let selectDatabase = null;
let selectUser = null;
let dropdownUser = null;
let currentUser = {};
$(document).ready(function () {
    selectDatabase = $('#databaseSelect');
    selectUser = $('#userSelect');
    dropdownUser = $("#userDropdown");
    getUserProfile();
    selectDatabase.formSelect();
    selectUser.formSelect();
    dropdownUser.dropdown();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

如果不能测试一些东西就很难回答这个问题，但无论如何我都会尝试:)

似乎有时 Materialize js 无法正确加载，或者（我认为最有可能的）它在您使用函数后加载。

所以解决方案是这样的

确保在加载 Materialize js 后使用您的代码。你可以通过几种方式做到这一点。最简单的方法是将 defer 属性添加到 html 中的脚本标签，它会按照 html.

中标签的顺序加载 js

例子

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js" defer></script>
<script src="your_js.js" defer></script>

Answer 2

好的。所以看起来我确实找到了问题。 Main.Js 干扰了 Materalize 并导致了错误。我为我们的主题找到了一个更简单的 main.js。现在错误消失了，网站运行得非常棒。谢谢大家的帮助。

Materialise 周期性 JS 错误

Materialize Periodic JS error

javascript

css

jquery

materialize