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

【问题标题】：Dynamically added checkbox don't look the same动态添加的复选框看起来不一样
【发布时间】：2017-06-27 13:58:59
【问题描述】：

通过在 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

我试过用ready

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

没有变化。

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

【问题讨论】：

动态添加新元素时需要升级DOM。看看这个问题：stackoverflow.com/questions/32363511/…
你的小提琴没有描述你的问题
我看不出这个 Fiddle 有什么问题。请提供一个可重现的示例。

标签： javascript jquery dom material-design material-design-lite

【解决方案1】：

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

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

你必须用

注册新元素

upgradeElement

【讨论】：

是的。 componentHandler.upgradeElements($('#dynamic-checkbox').get());

【解决方案2】：

MDL 为您的组件动态添加类。当你动态添加一个组件时，你需要告诉 MDL 注册到组件以便升级它。您的问题与How can I update/refresh Google MDL elements that I add to my page dynamically?高度相关

【讨论】：

【解决方案3】：

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

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

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

【讨论】：