0

By adding a mdl-checkbox element to the HTML file, I get the following result:

enter image description here

<label id="check" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input id="MdlCheckBox" type="checkbox" class="mdl-checkbox__input" value="0" />
<span class="mdl-checkbox__label">Check Me</span>

By adding the same code by injection the checkbox becomes plain:

enter image description here

var html = '<label id="check" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"><input id="MdlCheckBox" type="checkbox" class="mdl-checkbox__input" value="0" /><span class="mdl-checkbox__label">Check Me</span></label>';
$("#dynamic-checkbox").append(html);

Here is the jsFiddle

I have tried to use ready

$(function() {
  $("#dynamic-checkbox").append(html);
)};

No change.

Any recommended way to dynamically add mdl element?

Idan
  • 5,405
  • 7
  • 35
  • 52
  • You need to upgrade the DOM when you dynamically add a new element. Check out this question: https://stackoverflow.com/questions/32363511/how-can-i-update-refresh-google-mdl-elements-that-i-add-to-my-page-dynamically – Titouan56 Jun 27 '17 at 13:59
  • 1
    you fiddle is not describing your problem – Titouan56 Jun 27 '17 at 14:00
  • 1
    I can't see any problem with this Fiddle. Please, provide a reproducible example. – Mateus Felipe Jun 27 '17 at 14:01

3 Answers3

0

MDL dynamically add class to your component. When you add a component dynamically, you need to tell MDL to register to component in order to upgrade it. Your question is highly related to How can I update/refresh Google MDL elements that I add to my page dynamically?

Titouan56
  • 6,932
  • 11
  • 37
  • 61
0

there's a section on dynamic added elements in the getting started guide

https://getmdl.io/started/index.html#dynamic

you hav to register the new element with 

upgradeElement
Lorenzo Catalano
  • 473
  • 2
  • 9
0

Whenever I dynamically add something I just upgrade everything:

function refreshMDL(){
    if(typeof componentHandler !=="undefined"){
        componentHandler.upgradeAllRegistered();
    }
}

I run this function after I have dynamically added anything mdl dependent.

Danbardo
  • 761
  • 7
  • 12