使用动态 innerHTML 更改处理按钮 mdl-js 样式

Question

更改 <button> innerHTML 似乎停用了 mdl-js-ripple-effect。使用方法动态构建新元素作为解决方法或将其报告为错误？

<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

在设置新 html 后尝试在现有元素上使用 componentHandler.upgradeElement(button)，但正如文档中所述，它只适用于新元素。尝试重用现有元素。

Answer 1

我在组件被MDL脚本解析升级的时候，外层节点添加了很多额外的属性，内部添加了额外的HTML。这意味着设置 innerHTML 将删除内部的一些必要标记，并且 upgradeElement 将由于添加到外部节点的标记而失败。

您应该先尝试 de-upgrading 带有 componentHandler.downgradeElements 的按钮，然后设置内部 HTML，然后调用 componentHandler.upgradeElement。

一些未经测试的示例代码：

function setText(element,newtext){
    componentHandler.downgradeElements(element);
    element.innerHTML=newtext;
    componentHandler.upgradeElement(element);
}
setText(document.getElementById('myButton'),'new value');

Answer 2

我遇到了类似的问题。我正在尝试通过 innerHtml 将一些卡片添加到页面中。该卡片包含一个使用 class 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>'

使用动态 innerHTML 更改处理按钮 mdl-js 样式

Handling button mdl-js styling with dynamic innerHTML change

html

javascript

css

material-design-lite