Волновой эффект дизайна материала не применяется к динамически создаваемой кнопке - PullRequest
Новая
       23

Волновой эффект дизайна материала не применяется к динамически создаваемой кнопке

1 голос
/ 27 марта 2019

Я пытаюсь создать кнопки с помощью метода jQuery append.Однако кнопки, которые были созданы jQuery, не имеют волнового эффекта, если я нажму на них.Кнопка, созданная в HTML, имеет волновой эффект.

Почему она отличается?Как сделать так, чтобы волновой эффект также отображался для кнопки, созданной jQuery?

Спасибо за помощь! 

$('#line').append('<button type="button" class="btn btn-lg btn-primary">Button created by js</button>');
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/css/mdb.min.css" rel="stylesheet"/>

<button id="btn1" type="button" class="btn btn-lg btn-primary">
  Button
</button>

<hr id="line">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/js/mdb.min.js"></script>

1 Ответ

3 голосов
/ 27 марта 2019

Эффект Waves из библиотеки MDBootstrap не применяется автоматически к динамически создаваемым элементам. Вам нужно создать экземпляр вручную на новой кнопке. Согласно документации , вы можете добиться этого в своем случае, позвонив по номеру Waves.attach('.btn', ['waves-light']);.

.

Также обратите внимание, что, как @VVV указано в комментариях, <hr> в основном используется для определения тематического разрыва на HTML-странице, лучше использовать after() вместо append(), так как этот код не будет проверяться через W3C. 

$('#line').after('<button type="button" class="btn btn-lg btn-primary">Button created by js</button>');

Waves.attach('.btn', ['waves-light'])
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/css/mdb.min.css" rel="stylesheet"/>

<button id="btn1" type="button" class="btn btn-lg btn-primary">
  Button
</button>

<hr id="line">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/js/mdb.min.js"></script>
...