以编程方式将模态注入 HTML 不起作用

Question

所以目前我正在学习 JavaScript，我正在尝试将一些从 JSON 文件中获取的数据注入到 HTML/Materialize Modal 中。

数据显示，并且是按钮的标签从文件中获取名称但Modal没有弹出。

现在我在 HTML 中留下了一个硬编码的 Modal 来测试它，并且那个可以工作，但是我从 JSON 获得并将它们注入 HTML 的那些没有弹出！我认为问题在于模态初始化需要在注入完成后重新初始化，但我可能错了！无论哪种方式，我都无法开始，我想知道是否有人知道我在哪里做错了。

这是简单的html：

<div class="container">
    <div class="row">
    </div>
    <!-- Modal Trigger -->
    <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

    <!-- Modal Structure -->
    <div id="modal1" class="modal bottom-sheet">
        <div class="modal-content">
            <h4>Modal Header</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>
</div>

这是我的简单 JS 代码：

const content = document.querySelector('.row');
fetch('./perTab.json')
    .then((response) => {
        console.log(response, 'resolved');
        return response.json();
    }).then(data => {
        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;
    }).catch((error) => {
        console.log(error, ' broke the promise')
    })

//this is Modal initialization
document.addEventListener('DOMContentLoaded', () => {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
});

Answer 1

我认为您需要在将其添加到内容的innerHTML 后执行var instances = M.Modal.init(elems);。

// For the dynamically generated modals :
content.innerHTML = html;
initializeModal();
..

// for DOMContentLoaded
document.addEventListener('DOMContentLoaded', initializeModal);

function initializeModal() {
  var elems = document.querySelectorAll('.modal');
  var instances = M.Modal.init(elems);
}