Как применить веб-JavaScript MDC (например, MDCRipple) к контенту, который был загружен с помощью AJAX

Question

В настоящее время я делаю веб-приложение, которое использует AJAX для изменения содержимого внутри страницы, но у меня возникла проблема с получением javascript для применения к элементам, которые были загружены, а не начинаются со страницы.

Например, если у меня в исходном HTML была кнопка, которая вызывала функцию AJAX,

<button onclick="AjaxFunction()>Change Button</button>

Это получил эту кнопку MDC с отдельной страницы,

<button class="mdc-button">New Button<button>

Тогда, если бы у меня было это в моем файле app.js,

import {MDCRipple} from '@material/ripple';

const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));

Затем, когда я нажимаю на исходную кнопку, чтобы вывести новую кнопку на страницу, пульсация не применяется, потому что новая кнопка не начиналась на странице с самого начала.

Как бы я получил пульс для инициализации на Новой кнопке после ее добавления на страницу?

---

Тогда это как бы приводит меня ко второму вопросу, и если бы можно было инициализировать рябь на Новой кнопке с помощью AJAX, как бы я затем адаптировался к ней для работы с любым новым содержимым MDC, добавляемым через AJAX? будь то кнопки MDC или вообще не имеет кнопок, но имеет другой контент MDC, для работы которого требуется Javascript. Как ящик или текстовое поле.

Answer 1

Я полагаю, вы создаете свой элемент кнопки внутри обратного вызова вашего AjaxFunction что-то вроде этого:

var button = document.createElement("button");
button.className = 'mdc-button';
button.innerText = 'New Button';
document.body.append(button);

Вы можете просто добавить волновой эффект, добавив следующий код:

new MDCRipple(button);

Теперь для автоматической инициализации всех компонентов вы можете использовать пакет mdc-auto-init. Многократный запуск кода инициализации не является проблемой, как указано здесь.

Изменить: mdc переменная не устанавливается, когда вы используете такой пакет, как webpack. Если вы хотите, чтобы все могли получить одну и ту же переменную mdc, вы можете посмотреть этот ответ или создать его самостоятельно:

window.mdc = {autoInit: mdcAutoInit, ...};