使用jQuery加载Materialize会导致Waves效果失效吗？

答案是会的，我来给你拆解原因和解决办法：

为什么会失效？ #

Materialize的Waves波纹效果，默认是在脚本加载完成后，自动扫描页面上所有带waves-effect类的元素完成初始化绑定。但如果你用jQuery的$.ajax或者$.getScript动态加载materialize.js，此时页面DOM已经加载完毕，Materialize内置的自动初始化逻辑（通常绑定在DOMContentLoaded事件上）已经错过了触发时机，所以页面上已有的按钮不会出现波纹效果。

怎么解决？ #

最简单的办法就是在materialize.js加载完成后，手动调用Waves的初始化方法：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>title</title>
  <link rel="stylesheet" href="materialize.css">
</head>
<body>
  <p>Hello world</p>
  <a class="waves-effect waves-light btn">Button</a>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// 用getScript更方便地加载脚本（本质也是ajax）
$.getScript('materialize.js', function() {
  // 加载完成后手动触发Waves的全局初始化
  Waves.displayEffect();
});
</script>

额外注意：动态添加元素的情况

如果之后你还会通过JS动态添加带waves-effect的元素，每次添加完后需要单独给新元素绑定效果：

// 比如动态创建一个新按钮
var newButton = $('<a class="waves-effect waves-light btn">New Button</a>');
$('body').append(newButton);

// 给新元素绑定Waves效果
Waves.attach(newButton[0]);

这样不管是页面初始的元素还是后来添加的，波纹效果都能正常工作啦。

内容的提问来源于stack exchange，提问作者Litionator