Javascript 使用动态innerHTML更改处理按钮mdl js样式_Javascript_Html_Css_Material Design Lite

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

javascript html css

Javascript 使用动态innerHTML更改处理按钮mdl js样式,javascript,html,css,material-design-lite,Javascript,Html,Css,Material Design Lite,更改innerHTML似乎会停用mdl js涟漪效应。使用该方法动态构建新元素作为解决方法，还是将其报告为bug <body> <button id="myButton" class="mdl-button mdl-js-button mdl-js-ripple-effect">OLD VALUE </button> </body> 在设置新html后，在现有元素上尝试了componentHandler.upgradeElem

更改

innerHTML似乎会停用mdl js涟漪效应。使用该方法动态构建新元素作为解决方法，还是将其报告为bug

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

在设置新html后，在现有元素上尝试了

componentHandler.upgradeElement（按钮）

，但正如文档中提到的，它只适用于新元素。尝试重用现有元素

I当组件由MDL脚本解析和升级时，会向外部节点添加许多额外的属性，并在内部添加额外的HTML。这意味着设置

innerHTML

将删除内部的一些必要标记，

upgradeElement

将由于添加到外部节点的标记而失败

您应该首先尝试使用

componentHandler.upgradeElements

反升级按钮，然后设置innerHTML，然后调用

componentHandler.upgradeElement

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

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

I当组件被MDL脚本解析和升级时，许多额外的属性被添加到外部节点，额外的HTML被添加到内部。这意味着设置

innerHTML

将删除内部的一些必要标记，

upgradeElement

将由于添加到外部节点的标记而失败

您应该首先尝试使用

componentHandler.upgradeElements

反升级按钮，然后设置innerHTML，然后调用

componentHandler.upgradeElement

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

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

我也有类似的问题。我正试图通过innerHtml向页面中添加一些卡片。该卡包含一个使用类mdl收音机的单选按钮

一切似乎都很好，但单选按钮无法加载样式。我看到的是一个简单的单选按钮，不是那种样式的。如果我将卡片从Begging添加到页面，单选按钮看起来正常，如预期的那样

欢迎发表任何评论，我不知道如何解决这个问题

     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>'

main.innerHTML='0\
\
\
\
\
\

\

\
\
\
\
\
\
\
\
'

我也有类似的问题。我正试图通过innerHtml向页面中添加一些卡片。该卡包含一个使用类mdl收音机的单选按钮

欢迎发表任何评论，我不知道如何解决这个问题

     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>'

main.innerHTML='0\
\
\
\
\
\

\

\
\
\
\
\
\
\
\
'

出于某种原因，在设置innerHTML之前，将其分级两次似乎是可行的。现在很好奇为什么相同的

componentHandler.degradeElements（元素）语句需要重复2次。似乎在设置innerHTML之前，在v1.1.1drown中将降级两次的必要性消失了，因为某种原因，它似乎可以工作。现在很好奇为什么相同的componentHandler.degradeElements（元素）语句需要重复2次。似乎在v1.1.1版中，重复降级两次的必要性消失了