Bootstrap 材料设计在动态 html 加载时无法正常工作答案

【问题标题】：Bootstrap material design not working properly with dynamic html loadBootstrap 材料设计在动态 html 加载时无法正常工作
【发布时间】：2019-10-23 03:03:06
【问题描述】：

   
$('#loaded_button').load('https://raw.githubusercontent.com/slfan2013/Jennly-Zhang-MetaboliteSD_ver03/master/to%20be%20load.html')

$.material.init()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/css/bootstrap-material-design.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/ripples.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/css/ripples.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />



<button class="btn btn-primary" href="#">Good Button</button>
<div id="loaded_button"></div>


<p><em>When click the GOOD BUTTON, the ripple css is working, but the LOADED BUTTON does not.</em></p>

我的项目需要动态地.load() HTML 文件。加载它们时，bootstrap material design 将无法正常工作。加载页面上的按钮会丢失一些 CSS 动画，其中包括 ripple-decorator.ripple-on.ripple-out 效果。我找到了一个类似的post，但它并没有解决我的问题。

请查看我的fiddle 或代码 sn-p。如果您单击 GOOD BUTTON 和 LOADED BUTTON，您会注意到 LOADED BUTTON 没有动画效果。有什么方法可以解决这个问题吗？

【问题讨论】：

感谢更新。我为你添加了答案

标签： jquery load material-design ripple

【解决方案1】：

您需要在加载的回调中再次调用$.material.init()，以便使用Material UI初始化新添加的内容。试试这个：

$('#loaded_button').load('https://raw.githubusercontent.com/slfan2013/Jennly-Zhang-MetaboliteSD_ver03/master/to%20be%20load.html', function() {
  $.material.init()
})

$.material.init()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/css/bootstrap-material-design.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/ripples.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/css/ripples.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />

<button class="btn btn-primary" href="#">Good Button</button>
<div id="loaded_button"></div>

【讨论】：