我目前正在制作一个使用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初始化“新按钮”上的涟漪，那么我将如何适应它，以适应通过AJAX添加的任何新MDC内容无论是仅MDC按钮，还是根本没有任何按钮，而是具有需要Javascript才能起作用的其他MDC内容。就像一个抽屉或文本字段。
最佳答案
我想您是在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所述，多次运行初始化代码没有问题。
编辑：使用webpack之类的捆绑器时，未设置
mdc变量。如果希望所有人都能获得相同的mdc变量，则可以查看this answer或自己创建它：window.mdc = {autoInit: mdcAutoInit, ...};