javascript - 如何将 MDC web javascript(如 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 按钮，还是根本没有任何按钮但具有其他需要 Javascript 才能运行的 MDC 内容。就像抽屉或文本字段。

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 .多次运行初始化代码是没有问题的 here .

编辑:mdc 变量在您使用像 webpack 这样的 bundler 时没有设置。如果您希望所有人都能获得相同的 mdc 变量，您可以查看 this answer或者自己创建:

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