Handling button mdl-js styling with dynamic innerHTML change

问题

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

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.

回答1:

I when the component is parsed and upgraded by the MDL script, a lot of extra attributes are added to the outer node, and extra HTML added inside. That means both that setting the innerHTML will remove some of the necessary markup inside and that the upgradeElement will fail because of the markup that was added to the outer node.

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

回答2:

I'm having a similar issue. I'm trying to add some card via innerHtml into the page. The card contains a radio button using the class mdl-radio.

Everything seems to work fine, but the radio button doesn't load the style. I'm seeing a simple radio button not the styled one. If I add the card to the page from the beggining the radio button looks OK, as expected.

Any comment is welcome, I'm not sure how to fix this.

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

来源：https://stackoverflow.com/questions/34762689/handling-button-mdl-js-styling-with-dynamic-innerhtml-change

标签

javascript

html

css

material-design-lite