如何将 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 初始化新按钮上的波纹，我将如何让它适应工作通过 AJAX 添加的任何新 MDC 内容，无论它只是 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. Running the initialize code multiple times is no problem as stated here。

编辑：当您使用像 webpack 这样的捆绑器时，不会设置 mdc 变量。如果您希望所有人都能获得相同的 mdc 变量，您可以查看 this answer 或自己创建：

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

How to apply MDC web javascript (like MDCRipple) to content that has been loaded in with AJAX