Компоненты MDL не работают при динамическом добавлении - PullRequest
Новая
       10

Компоненты MDL не работают при динамическом добавлении

0 голосов
/ 23 апреля 2020

Я делаю функцию onclick и затем отображаю индикатор выполнения, добавляя его из javascript. Я также использую материал дизайн Lite CDN. Компоненты добавляются, но не отображаются в пользовательском интерфейсе.

Код для индикатора выполнения 

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)

Пожалуйста, помогите

1 Ответ

0 голосов
/ 26 апреля 2020

Убедитесь, что вы добавили javascript в содержимое вашей страницы: <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

Этот скрипт делает componentHandler доступным для вызова из вашего javascript. Вызывайте это каждый раз, когда вы добавляете элементы в dom. 

componentHandler.upgradeDom()

или индивидуально обновляете каждый элемент как документированный , добавляя вызов к 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
...