如何更新/刷新我动态添加到页面的Google MDL元素？

I'm working with Google Material Design components which are stripped down for simplicity, then rendered more fully when the page is loaded. Simplified below to illustrate the issue:

我正在使用Google Material Design组件，这些组件为简单起见而被剥离，然后在加载页面时更完整地呈现。以下简化说明问题：

What shows in the index.html file:

index.html文件中显示的内容：

<div class="switch"></div>

What renders to the DOM when the page is loaded:

加载页面时呈现给DOM的内容：

<div class="switch">
   <div class="switch_track"></div>
   <div class="switch_thumb"></div>
</div>

I am creating a drag and drop HTML editor and have template files for each component type. The template file for a switch is simply:

我正在创建一个拖放HTML编辑器，并为每个组件类型提供模板文件。交换机的模板文件只是：

switch.html

switch.html

<div class="switch"></div>

The problem is when I drag this to the canvas. jQuery looks at switch.html and renders <div class="switch"></div> to the DOM, but since it was dynamically added, it is not being "seen" by the scripts that added the additional track and thumb tags.

问题是我将它拖到画布上。 jQuery查看switch.html并将

呈现给DOM，但由于它是动态添加的，因此添加其他track和thumb标签的脚本不会“看到”它。

How can I fix this issue so that whenever the DOM is updated, it reruns any scripts? Ideally I would like to avoid touching any of the Material Design script files.

我该如何解决这个问题，以便每当DOM更新时，它会重新运行任何脚本？理想情况下，我希望避免触及任何Material Design脚本文件。

1 个解决方案

#1

I found the solution in this MDL Github forum post from MDL contributor Jonathan Garbee:

我在MDL贡献者Jonathan Garbee的MDL Github论坛帖子中找到了解决方案：

The component handler [ componentHandler.upgradeDom() ] will handle upgrading everything if you just call it with no parameters.

如果只是在没有参数的情况下调用它，组件处理程序[componentHandler.upgradeDom（）]将处理升级所有内容。

So the pseudo-code of my solution would be:

所以我的解决方案的伪代码将是：

 // Callback function of jquery-ui droppable element
 drop: function(event, ui) {
    // Add the element from it's template file
    $.get("templates/" + elem + ".html", function(data) {
      $("#canvas").append(data);

      // Expand all new MDL elements
      componentHandler.upgradeDom();
    });
 });

For future readers and users of the Material Design Lite (MDL) framework, you can also refresh dynamically added elements individually (instead of combing the entire DOM).

对于Material Design Lite（MDL）框架的未来读者和用户，您还可以单独刷新动态添加的元素（而不是梳理整个DOM）。

For example, componentHandler.upgradeDom("mdl-menu") will upgrade only mdl-menu elements.

例如，componentHandler.upgradeDom（“mdl-menu”）将仅升级mdl-menu元素。

#1