javascript - 通过 ajax 加载时，MaterialDesign、JS 行为丢失

Question

我从 Ajax、jQuery 等开始，如果我在这里犯了愚蠢的错误，我深表歉意。我正在使用 PHP/JS 构建网站，并使用 Google 的 Material Design 组件和 CSS:https://getmdl.io/components/

我的页面是这样构建的:- index.php，这是主页(带有指向 css、js 文件等的链接...)- 包含一个 div，其中加载了其他 php“模块”(不同的 php 文件，仅包含一些需要的部分)。

我的问题是，在这些加载的页面中，Material Design 类的每个“特殊”行为都完全丢失(按钮上没有“涟漪效应”，不会消失的文本字段标签因此与文本字段内容重叠，等等。 .). css 样式很好(显示 Material 设计颜色，视觉效果很好)但点击时的行为等...

知道如何解决这个问题吗？非常感谢!

Answer 1

在深入研究 jQuery githubs 问题报告后找到了解决方案。似乎组件在通过 AJAX 加载时未升级 DOM。

必须在通过 AJAX 加载的页面中添加以下调用:

 componentHandler.upgradeDom();

要么通过函数调用，要么通过ajaxComplete一个监听器，例如:

 $('body').ajaxComplete(function () {
      componentHandler.upgradeDom();
 });