javascript - 如何将 MDC web javascript（如 MDCRipple）应用于已使用 AJAX 加载的内容

Question

我目前正在制作一个使用 AJAX 更改页面内内容的 Web 应用程序，但我遇到了一个问题，即让 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 初始化 New Button 上的波纹，那么我将如何让它适应通过 AJAX 添加的任何新 MDC 内容无论它只是 MDC 按钮，还是根本没有任何按钮但有其他需要 Javascript 才能运行的 MDC 内容。像抽屉或文本字段。

score 1 · Accepted Answer

我想你正在你的回调中创建你的按钮元素，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, ...};

1 回答 1