1

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

My project needs to .load() HTML files dynamically. When loading them, the 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, but it does not solve my problem.

Please see my fiddle or the code snippet. If you click GOOD BUTTON and LOADED BUTTON, you'll notice that the LOADED BUTTON does not have the animation effect. Is there any method that could solve this problem?

WCMC
  • 1,602
  • 3
  • 20
  • 32

1 Answers1

1

You need to call $.material.init() again in the callback of load so that the newly added content is initialised with the Material UI. Try this:

$('#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>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339