Дизайн материала начальной загрузки не работает должным образом с динамической загрузкой HTML - PullRequest
Новая
       43

Дизайн материала начальной загрузки не работает должным образом с динамической загрузкой HTML

1 голос
/ 07 июня 2019 

   
$('#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-файлы.При их загрузке дизайн материала начальной загрузки не будет работать должным образом.Кнопка на загруженной странице потеряет некоторую CSS-анимацию, которая включает в себя эффекты ripple-decorator.ripple-on.ripple-out.Я нашел похожий пост , но он не решил мою проблему.

Пожалуйста, посмотрите мою скрипку или фрагмент кода.Если вы нажмете ХОРОШУЮ КНОПКУ и ЗАГРУЖЕННУЮ КНОПКУ, вы заметите, что ЗАГРУЗЕННАЯ КНОПКА не имеет эффекта анимации.Есть ли способ, который мог бы решить эту проблему?

1 Ответ

1 голос
/ 07 июня 2019

Вам необходимо снова вызвать $.material.init() в обратном вызове load, чтобы вновь добавленное содержимое было инициализировано с помощью пользовательского интерфейса материала.Попробуйте это: 

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