Question

更改<body> <button id="myButton" class="mdl-button mdl-js-button mdl-js-ripple-effect">OLD VALUE </button> </body> innerHTML似乎会停用mdl-js-ripple-effect。使用方法mentioned here动态构建一个新元素作为变通方法或将其报告为错误？

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

});

JS：

componentHandler.upgradeElement(button)

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

在设置新的html后尝试了现有元素上的user agent stylesheet，但正如文档中所提到的那样，它只适用于新的html。试图重用现有元素。

Answer 1

我在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');

Answer 2

我遇到了类似的问题。我正在尝试通过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>'

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

2 个答案: