使用innerHTML和appendChild执行外部JS

Question

我一直在玩Google几天前推出的Material Design Lite库，但有一些问题，特别是关于如何使用{{更改HTML时启动（或执行？）外部JS的问题1}}和innerHTML。

请参阅第一个示例here。正如您所看到的，菜单的HTML在首次加载时已经在HTML文件中，因此菜单工作正常。

但在this示例中，使用JS修改了文档的HTML。但是，菜单不再起作用了，因为脚本没有执行，我想。

如何解决此问题？什么是实现这一结果的更好方法？对于JavaScript来说，我是一个新手。

Answer 1

您需要从库中附加正确的事件侦听器。通过此更改（在追加项目后添加componentHandler.upgradeAllRegistered();），它应该有效：

document.body.appendChild(menu);
componentHandler.upgradeAllRegistered();

Answer 2

当动态插入菜单按钮时（当用户点击时），它不会被分配事件监听器以显示菜单。我猜测材料设计库在它（库）被加载时解析HTML（因为你将它加载到HTML文档的底部）。由于它已经在用户点击时加载，因此它不会检查已插入的新元素，也无法为其分配事件监听器。

如果是这种情况，您需要找到一种方法让图书馆识别您的新按钮。