Mdl组件在动态添加时不起作用

Question

我正在制作onclick函数，然后通过从javascript附加进度条来显示进度条。我也在使用材料设计lite CDN。组件已添加，但未显示在UI上。

进度条代码

var pageContent = document.getElementById("page-content")
    var progressBar = document.createElement("div")
    progressBar.classList.add("mdl-spinner")
    progressBar.classList.add("mdl-js-spinner")
    progressBar.classList.add("is-active")
    progressBar.id = "pBar"
    pageContent.appendChild(progressBar)

请帮助

Answer 1

确保将javascript添加到页面的内容中：<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

此脚本使componentHandler可以从您的JavaScript中调用。每次将元素添加到dom时都调用此函数。

componentHandler.upgradeDom()

或将每个元素分别升级为documented，在将任何子元素动态附加到dom后添加对upgradeElement的调用：

var progressBar = document.createElement("div")
    progressBar.classList.add("mdl-spinner")
    progressBar.classList.add("mdl-js-spinner")
    progressBar.classList.add("is-active")
    progressBar.id = "pBar"
    pageContent.appendChild(progressBar)
    componentHandler.upgradeElement(progressBar); //<- add this call