引导材料设计不能与动态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将无法正常工作。加载的页面上的按钮将丢失一些CSS动画，其中包括ripple-decorator.ripple-on.ripple-out效果。我找到了一个类似的post，但它不能解决我的问题。

请参阅我的fiddle或代码片段。如果单击“好”按钮和“已加载”按钮，您将注意到已加载的按钮不具有动画效果。有什么方法可以解决这个问题吗？

Answer 1

您需要在load的回调中再次调用$.material.init()，以便使用物料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>

​