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

Question

通过将 mdl-checkbox 元素添加到 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>

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

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

我已经尝试使用 ready

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

没有变化。

有什么推荐的动态添加 mdl 元素的方法吗？

Answer 1

MDL 动态添加 class 到您的组件。当你动态添加一个组件时，你需要告诉 MDL 注册到组件以便升级它。您的问题与

高度相关

Answer 2

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

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

您必须使用

注册新元素

upgradeElement

Answer 3

每当我动态添加一些东西时，我都会升级所有东西：

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

我运行这个函数是在我动态添加任何依赖于mdl的东西之后。

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

Dynamically added checkbox don't look the same

javascript

jquery

dom

material-design

material-design-lite