Material 设计波浪效果未应用于动态创建的按钮

Question

我正在尝试使用 jQuery 的 append 方法创建按钮。但是，如果我单击由 jQuery 创建的按钮，则它们不会产生波浪效果。我在HTML中创建的按钮具有波浪效果。

为什么不一样？如何让 jQuery 创建的按钮也出现波浪效果？

感谢您的帮助！

$('#line').append('<button type="button" class="btn btn-lg btn-primary">Button created by js</button>');

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/css/mdb.min.css" rel="stylesheet"/>

<button id="btn1" type="button" class="btn btn-lg btn-primary">
  Button
</button>

<hr id="line">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/js/mdb.min.js"></script>

Answer 1

MDBootstrap 库中的波浪效果不会自动应用于动态创建的元素。您需要在新按钮上手动实例化它。根据 documentation 你可以通过调用 Waves.attach('.btn', ['waves-light']);.

来实现你的情况

另请注意，正如@VVV 在评论中所述，<hr> 主要用于定义 HTML 页面中的主题中断，使用 after() 而不是 append() 会更好，因为此代码不会通过 W3C 验证。

$('#line').after('<button type="button" class="btn btn-lg btn-primary">Button created by js</button>');

Waves.attach('.btn', ['waves-light'])

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/css/mdb.min.css" rel="stylesheet"/>

<button id="btn1" type="button" class="btn btn-lg btn-primary">
  Button
</button>

<hr id="line">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/js/mdb.min.js"></script>

Material 设计波浪效果未应用于动态创建的按钮

Material design wave effect not applied to dynamically created button

jquery

twitter-bootstrap

bootstrap-material-design