我正在尝试使用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>
MDBootstrap 库中的 Waves 效果不会自动应用于动态创建的元素。您需要在新按钮上手动实例化它。根据文档,您可以通过调用 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>