改变 <button> innerHTML 似乎停用了 mdl-js-ripple-effect。
使用方法 mentioned here动态构建一个新元素作为解决方法或将其报告为错误？
<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 后在现有元素上，但如文档中所述，它仅适用于新元素。尝试重用现有元素。
最佳答案
我在组件被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');
关于javascript - 使用动态 innerHTML 更改处理按钮 mdl-js 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34762689/