使用动态innerHTML更改处理按钮mdl-js样式 [英] Handling button mdl-js styling with dynamic innerHTML change
问题描述
更改<按钮> innerHTML似乎会停用mdl-js-ripple-effect。
使用此处提及的方法动态构建新的元素作为解决方法或报告此错误？
Changing <button> innerHTML seems to deactivate mdl-js-ripple-effect.
Use the method mentioned here to dynamically build a new element as the workaround or report this as a bug?
<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之后在现有的元素上，但正如文档中提到的那样，它仅适用于新元素。尝试重用现有元素。
Tried the componentHandler.upgradeElement(button) on the existing element after setting new html, but as mentioned in the docs it's only good for new ones. Trying to reuse existing elements.
推荐答案
您应该尝试使用 componentHandler.downgradeElements 先解除升级按钮，然后设置innerHTML，然后调用 componentHandler.upgradeElement 。
You should try de-upgrading the button with componentHandler.downgradeElements first, then set the innerHTML, then call componentHandler.upgradeElement.
一些未经测试的示例代码：
Some untested sample code:
function setText(element,newtext){
componentHandler.downgradeElements(element);
element.innerHTML=newtext;
componentHandler.upgradeElement(element);
}
setText(document.getElementById('myButton'),'new value');
这篇关于使用动态innerHTML更改处理按钮mdl-js样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
