Fatal编程技术网
  • javascript/
  • Javascript Material Design Lite-JS不应用事件侦听器

Javascript Material Design Lite-JS不应用事件侦听器

javascript html

Javascript Material Design Lite-JS不应用事件侦听器,javascript,html,material-design-lite,Javascript,Html,Material Design Lite,我在材料设计Lite库中遇到了一个奇怪的问题。根据文档，在关闭body标记之前，我已经包含了mdljsscript标记。 但是，我无法应用mdl库中的样式。在检查开发工具时，我发现material.min.js中的事件侦听器没有应用于文本字段和按钮等。我附加了两个图像以更好地解释这种情况 如您所见，正在加载文件 但是我看不到MDL中文本字段的任何动画 另外，我正在本地服务器上运行该网站。 任何形式的帮助都将不胜感激。谢谢 HTML: 页面标题 ... 以下是MDL按钮的一个非常基本的工作示

我在材料设计Lite库中遇到了一个奇怪的问题。根据文档，在关闭
body
标记之前，我已经包含了mdljsscript标记。 但是，我无法应用mdl库中的样式。在检查开发工具时，我发现
material.min.js
中的事件侦听器没有应用于文本字段和按钮等。我附加了两个图像以更好地解释这种情况

如您所见，正在加载文件

但是我看不到MDL中文本字段的任何动画

另外，我正在本地服务器上运行该网站。 任何形式的帮助都将不胜感激。谢谢

HTML:


页面标题
...
以下是MDL按钮的一个非常基本的工作示例，可作为故障排除的参考


材质设计Lite按钮示例
按钮
以下是MDL按钮的一个非常基本的工作示例，可作为故障排除的参考


材质设计Lite按钮示例
按钮
我的问题是，我从我的模板复制粘贴了呈现的小部件，该模板已经添加了
数据升级
属性。只需遵循MDL文档，您就可以了。

我的问题是，我从模板中复制粘贴了呈现的小部件，该模板已经添加了
数据升级
属性。只需遵循MDL文档，您就可以了。

请看一看……MDL和您正在使用的一个或多个库之间可能存在冲突（我的第一个猜测是引导）。如果您只是对某个特定组件使用MDL，那么最好考虑在哪里可以只包含单个组件的代码，以减少潜在的冲突问题。你也可以查看一个特定于引导的材料库。我使用了一个主题，所以我坚持使用MDL。我删除了除MDL one之外的所有脚本标记，但仍然不走运…在回答中发布了一个正在运行的最小MDL设置（太多了，无法发表评论），希望能够帮助您作为测试哪些库冲突的起点。添加了请看一看…MDL和您正在使用的一个或多个其他库之间可能存在冲突（引导是我的第一个猜测）。如果您只是对某个特定组件使用MDL，那么您最好研究在何处可以只包含单个组件的代码，以减少潜在的冲突问题。您也可以研究某个特定于引导的材质库。我使用的是主题，因此我坚持使用MDL。我删除了除MDL one的pt仍然不走运…在一个答案中发布了一个运行最低限度的MDL设置（对于评论来说太多了），希望能够帮助您作为测试哪些库存在冲突的起点。 
<!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>