MDL upgradeElement / upgradeDom 不工作答案

【问题标题】：MDL upgradeElement / upgradeDom not workingMDL upgradeElement / upgradeDom 不工作
【发布时间】：2015-11-02 10:27:08
【问题描述】：

我有以下 HTML 代码：

<div class="mailTabs mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">TAB1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">TAB2</a>
<a href="#scroll-tab-3" class="mdl-layout__tab">TAB3</a>
</div>

加载页面时，每个选项卡如下所示： <a href="#scroll-tab-1" class="mdl-layout__tab">TAB1<span class="mdl-layout__tab-ripple-container mdl-js-ripple-effect" data-upgraded=",MaterialRipple">等

当我尝试动态添加一些额外的标签时，它们不会收到相同的类和额外的东西，使它们看起来像我的“原始硬编码标签”。

我的动态添加标签的代码如下：

var tabElement ='<a href="#scroll-tab-4" class="mdl-layout__tab"></a>';
$(tabElement).appendTo($('.mailTabs'));

我尝试使用componentHandler.upgradeDom(); or componentHandler.upgradeElement('MaterialTabs','mdl-js-tabs');，但似乎没有更新我动态添加的元素。

我错过了什么？

JSFiddle here

【问题讨论】：

当您说：“他们不会收到相同的课程和其他内容以使它们看起来像我的'原始硬编码标签'”时，您到底在寻找什么？那是什么课？ mdl-layout__tab 还是别的什么？
@SimonBaars，不幸的是，向这个问题添加赏金不足以解决它的问题。首先，它没有明确的可重现案例。小提琴似乎受到包含库中的内部错误的影响（单击选项卡进行复制）。链接更新版本的 lib 可能会解决此问题。其次，预期产出没有明确定义。我们不知道“似乎没有更新我动态添加的元素” 的真正含义。可能相关：Adding tab dynamically upgradeElement

标签： javascript element upgrade material-design-lite

【解决方案1】：

这是一个旧的 jQuery 代码，但它可以工作。它创建选项卡，但不可见。加了就可以看到了：

TAB4

作为标签的内部文本

<a>

这是只有 TAB4 更改的行：

var tabElement ='<a href="#scroll-tab-4" class="mdl-layout__tab">TAB4</a>';

【讨论】：