Material Design Lite - JS Не применять слушателей событий

У меня странная проблема с библиотекой Material Design Lite. Я включил тег сценария mdl js перед закрытием body бирка, согласно документации. Однако я не могу применить стили из библиотеки MDL. Изучив инструменты разработки, я обнаружил, что слушатели событий из material.min.js не применяются к текстовым полям и кнопкам и т. д. Я прилагаю два изображения, чтобы лучше объяснить ситуацию.

Файлы MDL загружаются правильно

Как видите, файлы загружаются...

Стиль не работает, как задумано

Но я не вижу никакой анимации из MDL для текстовых полей.

PS. Я запускаю веб-сайт на локальном сервере. Любая помощь будет принята с благодарностью. Спасибо...

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Page Title</title>
    <!-- google font -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" />
    <!-- icons -->
    <link href="/static/portal/assets/fonts/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="/static/portal/assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <!--bootstrap -->
    <link href="/static/portal/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <!-- Material Design Lite CSS -->
    <link rel="stylesheet" href="/static/portal/assets/plugins/material/material.min.css">
    <link rel="stylesheet" href="/static/portal/assets/css/material_style.css">
    <!-- Theme Styles -->
    <link href="/static/portal/assets/css/theme/light/theme_style.css" rel="stylesheet" id="rt_style_components" type="text/css" />
    <link href="/static/portal/assets/css/theme/light/style.css" rel="stylesheet" type="text/css" />
    <link href="/static/portal/assets/css/plugins.min.css" rel="stylesheet" type="text/css" />
    <link href="/static/portal/assets/css/responsive.css" rel="stylesheet" type="text/css" />
    <link href="/static/portal/assets/css/theme/light/theme-color.css" rel="stylesheet" type="text/css" />
</head>
<body class="page-header-fixed sidemenu-closed-hidelogo page-content-white page-md">
...
<!-- start js include path -->
<script src="/static/portal/assets/plugins/jquery/jquery.min.js" ></script>
<script src="/static/portal/assets/plugins/popper/popper.js" ></script>
<script src="/static/portal/assets/plugins/jquery-blockui/jquery.blockui.min.js" ></script>
<script src="/static/portal/assets/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<!-- bootstrap -->
<script src="/static/portal/assets/plugins/bootstrap/js/bootstrap.min.js" ></script>
<!-- Common js-->
<script src="/static/portal/assets/js/app.js" ></script>
<script src="/static/portal/assets/js/layout.js" ></script>
<script src="/static/portal/assets/js/theme-color.js" ></script>
<!-- Material -->
<script src="/static/portal/assets/plugins/material/material.min.js"></script>
<script src="/static/portal/assets/js/pages/material-select/getmdl-select.js" ></script>
<script  src="/static/portal/assets/plugins/material-datetimepicker/moment-with-locales.min.js"></script>
<script  src="/static/portal/assets/plugins/material-datetimepicker/bootstrap-material-datetimepicker.js"></script>
<script  src="/static/portal/assets/plugins/material-datetimepicker/datetimepicker.js"></script>
<!-- dropzone -->
<script src="/static/portal/assets/plugins/dropzone/dropzone.js" ></script>
<script src="/static/portal/assets/plugins/dropzone/dropzone-call.js" ></script>
<!-- end js include path -->


</body>
</html>
Источник

2 ответа

Решение

Вот очень простой рабочий пример кнопки MDL, которая может помочь в качестве справки при устранении неполадок.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Material Design Lite Button example</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>

<body>

  <!-- Accent-colored raised button with ripple -->
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
    Button
  </button>

  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>

</body>

</html>

Источник

Моя проблема заключалась в том, что я копировал вставленный виджет из моего шаблона, который уже был добавлен data-upgraded приписывать. Просто следуйте документации MDL, и все будет в порядке.

Источник
Другие вопросы по тегам