以编程方式注入到HTML的模式不起作用

Question

因此，目前我正在学习JavaScript，并试图将从JSON文件获取的一些数据务实地注入到HTML/物化模态中。

数据显示，标记是按钮，从文件中获取名称，但Modal不弹出。

现在，我已经在HTML中留下了一个硬编码的模型来测试它，这个模块可以工作，但是我从JSON获得并将它们注入HTML的那些模块不会弹出！我认为问题来自这样一个事实，即在注入完成后，Modal初始化需要重新初始化，但我可能错了！不管怎么说，我都没能开始做这件事，我想知道是否有人知道我做错了什么。

下面是简单的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

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

// 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);
}