动态添加的复选框看起来不一样

Question

通过向HTML文件添加mdl-checkbox元素，我得到以下结果：

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

通过注入添加相同的代码，复选框变为简单：

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

以下是jsFiddle

我试过使用就绪

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

没有变化。

任何推荐的动态添加mdl元素的方法？

Answer 1

MDL动态地向您的组件添加类。当您动态添加组件时，您需要告诉MDL注册到组件以进行升级。 您的问题与How can I update/refresh Google MDL elements that I add to my page dynamically?

高度相关

Answer 2

在入门指南中有一个关于动态添加元素的部分

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

你要用

注册新元素

upgradeElement

Answer 3

每当我动态添加内容时，我只需升级所有内容：

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

在动态添加mdl依赖的任何内容后运行此函数。