javascript - 如何将MDC Web JavaScript（例如MDCRipple）应用于已用AJAX加载的内容(How to apply MDC web javascript (like MDCRipple) to content that has been loaded in with AJAX)

Question

Im currently making a web app that uses AJAX to change the content inside the page, but I'm running into an issue with getting the javascript to apply to elements that have been loaded in rather than starting on the page.

(我目前正在制作一个使用AJAX来更改页面内内容的Web应用程序，但是我遇到了一个问题，那就是如何使JavaScript应用于已加载的元素而不是在页面上启动。)

For example, if I had a button in my starting HTML that called an AJAX function,

(例如，如果我在启动HTML中有一个称为AJAX函数的按钮，)

<button onclick="AjaxFunction()">Change Button</button>

That got this MDC button from a separate page,

(从另一个页面获得了MDC按钮，)

<button class="mdc-button">New Button<button>

Then if I had this in my app.js file,

(然后，如果我在app.js文件中有此文件，)

import {MDCRipple} from '@material/ripple';

const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));

Then when I click on the original button to get the new button into the page, the ripple wont apply because the New Button didn't start on the page to begin with.

(然后，当我单击原始按钮以使新按钮进入页面时，涟漪将不会出现，因为新按钮并未从页面的开头开始。)

How would I get the ripple to initialise on the New Button after it is added to the page?

(将新按钮添加到页面后，如何在涟漪图中初始化波纹？)

---

This then kind of leads into my second question, and that would be, if it is possible to initialise the ripple on the New Button through AJAX, how would I then get to it adapt to work on any new MDC content that is added through AJAX whether it just MDC buttons, or doesn't have any buttons at all but has other MDC content that needs Javascript to function.

(这就引出了我的第二个问题，那就是，如果可以通过AJAX初始化“新按钮”上的涟漪，那么我将如何适应它，以适应通过AJAX添加的任何新MDC内容无论是MDC按钮，还是根本没有任何按钮，而是具有需要Javascript才能起作用的其他MDC内容。)

Like a drawer or text field.

(就像一个抽屉或文本字段。)

  ask by Mr. Simmons translate from so

Answer 1

I suppose you are creating your button element inside the callback of your AjaxFunction something like this:

(我想您是在AjaxFunction的回调内创建按钮元素，如下所示：)

var button = document.createElement("button");
button.className = 'mdc-button';
button.innerText = 'New Button';
document.body.append(button);

You can simply add the ripple effect by adding the following code:

(您可以通过添加以下代码来简单地添加波纹效果：)

new MDCRipple(button);

Now to automatically initialize all components you can use the package mdc-auto-init .

(现在，要自动初始化所??有组件，可以使用软件包mdc-auto-init 。)

Running the initialize code multiple times is no problem as stated here .

(运行初始化代码多次是没有问题的陈述在这里 。)

Edit: the mdc variable is not set when you use a bundler like webpack.

(编辑：当您使用诸如webpack的捆绑程序时，未设置mdc变量。)

If you want all be able to get the same mdc variable you can see this answer or create it yourself:

(如果希望所有人都能获得相同的mdc变量，则可以查看此答案或自己创建它：)

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