Выполнение внешних JS с использованием innerHTML и appendChild

Question

Я играл с библиотекой Material Design Lite, которую Google только запустил несколько дней назад, но есть некоторые вопросы, в частности о том, как инициировать (или выполнять?) Внешний JS, когда Изменения HTML с использованием innerHTML и appendChild.

Просмотреть первый пример here. Как вы можете видеть, HTML для меню уже находится в файле HTML, когда он загружен, поэтому меню работает нормально.

Но в примере this HTML документа модифицирован с использованием JS. Тем не менее, меню больше не работает, потому что сценарий не выполняется, я думаю.

Как решить эту проблему? Каков лучший способ достичь этого результата? Я новичок, когда дело доходит до JavaScript.

Answer 1

Вам необходимо будет подключить надлежащего прослушивателя событий из библиотеки. С этим изменением (добавив componentHandler.upgradeAllRegistered(); после добавления товара) он должен работать:

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

Answer 2

Когда кнопка меню вставлена ​​динамически (когда пользователь нажимает), ему не назначаются прослушиватели событий для отображения меню. Я предполагаю, что библиотека дизайна материалов анализирует HTML, когда загружается (библиотека) (поскольку вы загружаете ее внизу документа HTML). Поскольку он уже загружен к моменту, когда пользователь нажимает, он не проверяет новый элемент, который был вставлен, и не может назначить ему прослушиватели событий.

Если это так, вам нужно найти способ, чтобы библиотека узнала вашу новую кнопку.