以编程方式注入模态到 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);
}

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

Programmatically injected modal to HTML does not function

javascript

html

materialize