我正在使用Google Material Design组件,为了简单起见,它们被删除,然后在页面加载时更完整地呈现.以下简化说明问题：
index.html文件中显示的内容：
< div class =“switch”>< / div>
当页面加载时,DOM会呈现给DOM：
<div class="switch"> <div class="switch_track"></div> <div class="switch_thumb"></div> </div>
我正在创建一个拖放HTML编辑器,并为每个组件类型提供模板文件.交换机的模板文件是简单的：
switch.html
< div class =“switch”>< / div>
问题是当我把它拖到画布上. jQuery查看switch.html并呈现< div class =“switch”>< / div>到DOM,但是由于它是动态添加的,所以添加了其他曲目和缩略图标签的脚本没有被“看到”.
如何解决这个问题,以便每当更新DOM时,它会重新运行任何脚本？理想情况下,我想避免触摸任何材质设计脚本文件.
解决方法
我从MDL贡献者
Jonathan Garbee发现了
this MDL Github forum post的解决方案：
The component handler [ componentHandler.upgradeDom() ] will handle upgrading everything if you just call it with no parameters.
所以我的解决方案的伪代码是：
// 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();
});
});
对于未来的材料设计精简版(MDL)框架的读者和用户,您还可以单独刷新动态添加的元素(而不是整理整个DOM).
例如,componentHandler.upgradeDom(“mdl-menu”)将仅升级mdl菜单元素.
Further reading here.