Как применить веб-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

Полагаю, вы создаете элемент button внутри функции обратного вызова вашего 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 не устанавливается, когда вы используете пакет, такой как веб-пакет.Если вы хотите, чтобы все могли получить одну и ту же переменную mdc, вы можете посмотреть этот ответ или создать его самостоятельно:

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