Question

我尝试通过JQuery load()方法加载页面内容。这是代码

$(window).ready(function() {
  $('#content').load('views/login.html');
});

.mdl-layout {
  align-items: center;
  justify-content: center;
}

.mdl-layout__content {
  padding: 24px;
  flex: none;
}

<link href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" rel="stylesheet" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
    <main class="mdl-layout__content" id="content">
    </main>
 </div>

（抱歉，我无法将login.html添加到代码段编辑器。这是一个由mdl框架强大的登录表单：/）

现在，来自mdl的表单元素的Javascript函数无法正常工作。开发人员控制台中没有错误。我还尝试在jquery加载请求后重新加载我的所有javascript文件？

有没有人知道我的剧本出了什么问题？

Answer 1

如果您提供的代码是从.html文件中复制的，那么结构就不好了。这是工作版本：

<!doctype html>
    <html>
       <head>
           <meta charset="utf-8" />
       </head>
       <body>
           <style>
              .mdl-layout {
                  align-items: center;
                  justify-content: center;
               }

              .mdl-layout__content {
                  padding: 24px;
                  flex: none;
              }
           </style>
<link href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" rel="stylesheet" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
    <main class="mdl-layout__content" id="content">
    </main>
</div>
<script type="text/javascript">
    $(window).ready(function() {
    $('#content').load('views/login.html');
});
</script>
</body>
</html>

CSS样式需要用标签括起来，并且必须在标签内关闭Javascript代码希望这会对你有所帮助。

Answer 2

我自己解决了这个问题。这是解决方案：

我只是在load方法之后再次调用mdl javascript。

$.getScript('https://code.getmdl.io/1.3.0/material.indigo-blue.min.css');

现在它完美无缺。谢谢大家！

Javascript不适用于加载的内容

2 个答案: