Javascript 为什么不'；MDL芯片组件和Mustache.js是否协同工作？

（MDL）从模板动态添加时不呈现MDL

JSFiddle：

JSFIDLE显示了两个MDL芯片。第一个MDL芯片直接嵌入DOM的

中。当JQuery认为文档“就绪”时，使用Mustache.js动态添加第二个MDL芯片

显示动态添加的MDL芯片，但不显示MDL工具提示。直接嵌入HTML的MDL芯片确实呈现了它的MDL工具提示

我已经做了一个测试，普遍的共识是页面加载后添加的MDL组件（即动态MDL组件）不会添加到MDL的组件“注册表”中。调用

componentHandler.upgradeDom（）

应该注册所有未注册的MDL组件。我把这个加到小提琴上，但它并没有解决问题

注意，与不同的是，我将工具提示ID添加到芯片最外层的

元素，而不是图标

元素。但是，以下各项也不起作用：

<i class="material-icons" id="mustache-chip-tip">help</i>

帮助

我是在

componentHandler.upgradeDom（）

忽略了没有前缀为

mdl-…

的类的元素的情况下这样做的。然而，这没什么区别，也没用

只有一个芯片有mouseenter和mouseleave监听器，添加了Mustache.js的芯片没有：

直接嵌入HTML的芯片

Mustache.js芯片

---

看来，阻止它工作的是模板之外的工具提示。如果将其移动到模板中，它将工作：

<!-- MDL chip as a Mustache.js template. -->
<script id="template_chips" type="x-tmpl-mustache">
<span class="mdl-chip mdl-chip--deletable" id="mustache-chip-tip">
  <span class="mdl-chip__text">Mustache Chip</span>
  <span class="mdl-chip__action"><i id="mustache-chip-tip" class="material-icons">help</i></span>
</span>
<div class="mdl-tooltip mdl-tooltip--large" data-mdl-for="mustache-chip-tip">Mustache Chip Tip.</div>
</script>

胡子片
帮助
胡子屑尖。

---

当页面加载时，MDL似乎正在处理

数据MDL for

属性，即在呈现模板和显式调用

componentHandler.upgradeDom（）

，在该阶段，没有具有指定的

id

的元素。如果有人在调试这个问题，只需一个提示。您可以运行

componentHandler.upgradeDom（）从Firebug或Chrome开发者工具中的开发者控制台查看添加动态组件前后的效果。