JavaScript动态注入的Materialize Modal无法弹出问题求助

• 初始化时机错误：DOMContentLoaded事件仅在页面初始静态DOM加载完成时触发，此时异步fetch请求尚未完成，动态生成的Modal元素还未插入DOM，初始化逻辑仅能识别到静态硬编码的Modal，后续注入的Modal未被初始化因此无法弹出。
• 代码细节问题：原JS代码中的html变量未声明，会默认挂载为全局变量，可能引发变量污染。

将Modal初始化逻辑移动到fetch请求完成、动态HTML插入DOM之后执行即可，修改后的JS代码如下：

const content = document.querySelector('.row');
fetch('./perTab.json')
    .then((response) => {
        console.log(response, 'resolved');
        return response.json();
    }).then(data => {
        // 补充声明html变量
        let html = ``;
        console.log(data);
        data.forEach((element, index) => {
            html += `
            <!-- Modal Trigger -->
            <a class="waves-effect waves-light btn modal-trigger" href="#modal${index + 2}">${element.Name}</a>
    
            <!-- Modal Structure -->
            <div id="modal${index + 2}" class="modal bottom-sheet">
                <div class="modal-content">
                    <h4>h4</h4>
                    <p>A bunch of text</p>
                </div>
                <div class="modal-footer">
                    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
                </div>
            </div>
            `;
        });
        content.innerHTML = html;
        // 动态内容插入完成后初始化所有Modal
        const elems = document.querySelectorAll('.modal');
        const instances = M.Modal.init(elems);
    }).catch((error) => {
        console.log(error, ' broke the promise')
    })

// 原有DOMContentLoaded初始化逻辑可以保留，重复调用init不会影响已初始化的Modal
document.addEventListener('DOMContentLoaded', () => {
    const elems = document.querySelectorAll('.modal');
    const instances = M.Modal.init(elems);
});

内容的提问来源于stack exchange，提问作者CodeMonkey