Javascript 不适用于加载的内容答案

【问题标题】：Javascript don't work for loaded contentJavascript 不适用于加载的内容
【发布时间】：2018-03-02 11:08:53
【问题描述】：

我正在尝试通过 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 添加到 sn-p 编辑器。这是一个由 mdl 框架提供支持的登录表单：/）

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

有人知道我的脚本出了什么问题吗？

【问题讨论】：

可能是<main></main> 标签导致了这种行为
我试过了。还是一样的问题....
您确定控制台中没有任何内容吗？请检查 views/login.html 是否是正确的 URL 并检查元素 #content 的内容是否有内容。另外，如果有对views/login.html的GET请求，请检查chrome开发者工具上的network
对不起：将$(window).ready(function() { 更改为$(document).ready(function() { - 但我的测试仍然失败，使用document 而不是window
好消息@messerbill。更改window -> document

标签： javascript jquery html css ajax

【解决方案1】：

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

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

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

现在它可以完美运行了。谢谢大家！

【讨论】：

【解决方案2】：

如果您提供的代码是从您的 .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 代码必须用标签封闭希望对您有所帮助。

【讨论】：

对不起，我已经删除了 html 结构，因为我认为它与这个问题无关
可以附上login.html吗？