Обработка кнопки mdl-js стилем с динамическим изменением innerHTML

Изменения <button> innerHTML, кажется, деактивирует эффект mdl-js-ripple. Использовать метод, упомянутый здесь, чтобы динамически создать новый элемент в качестве обходного пути или сообщить об этом как об ошибке?

<body>
    <button id="myButton" class="mdl-button mdl-js-button mdl-js-ripple-effect">OLD VALUE
    </button>
</body>

JS:

window.addEventListener("load", () => {
  document.getElementById("myButton").innerHTML = "new value";

});

http://codepen.io/anon/pen/KVvMOE

Попробовал componentHandler.upgradeElement(button) на существующем элементе после установки нового html, но, как уже упоминалось в документации, он подходит только для новых. Попытка повторно использовать существующие элементы.

Источник

2 ответа

Решение

Когда компонент анализируется и обновляется с помощью сценария MDL, во внешний узел добавляется множество дополнительных атрибутов, а внутри добавляется дополнительный HTML. Это означает, что установка innerHTML удалит часть необходимой разметки внутри и что upgradeElement потерпит неудачу из-за разметки, которая была добавлена ​​к внешнему узлу.

Вы должны попробовать де-обновить кнопку с помощью componentHandler.downgradeElements сначала, затем установите innerHTML, затем вызовите componentHandler.upgradeElement,

Несколько непроверенных примеров кода:

function setText(element,newtext){
    componentHandler.downgradeElements(element);
    element.innerHTML=newtext;
    componentHandler.upgradeElement(element);
}
setText(document.getElementById('myButton'),'new value');
Источник

У меня похожая проблема. Я пытаюсь добавить карту через innerHtml на страницу. Карта содержит переключатель, использующий класс mdl-radio.

Кажется, все работает нормально, но радио-кнопка не загружает стиль. Я вижу простой переключатель, а не стилизованный. Если я добавлю карточку на страницу с самого начала, радио-кнопка выглядит нормально, как и ожидалось.

Любые комментарии приветствуются, я не уверен, как это исправить.

     main.innerHTML =  '<!-- CARD PREGUNTA-->\
  <div class="demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet" style="margin: 0 auto; display: none;" id="pregunta_card">\
  <div class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">\
  <!-- Contenido -->\
  <div class="mdl-card__supporting-text mdl-color-text--grey-600">\
  <h2 class="mdl-card__title-text" id="pregunta_card_title"></h2>\
  <br>\
  <br>\
  <!-- Radio Button 1 -->\
  <label id="opt1" class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option1">\
  <input type="radio" id="option1" class="mdl-radio__button" name="options"/>\
  <!-- intitial state checked using attribute checked  -->\
  <span class="mdl-radio__label" id="option1_value"></span>\
  </label>\
  </div>\
  </div>'
Источник
Другие вопросы по тегам