Bootstrap material 设计无法在动态 html 负载下正常工作

Question

   
$('#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 won't work properly. The button on the loaded page will lose some CSS animation, which includes the ripple-decorator.ripple-on.ripple-out effects. I found a similar post，但它并没有解决我的问题。

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

Answer 1

需要在load回调中再次调用$.material.init()，使新添加的内容初始化为MaterialUI。试试这个：

$('#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>

Bootstrap material 设计无法在动态 html 负载下正常工作

Bootstrap material design not working properly with dynamic html load

jquery

load

material-design

ripple