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

Posted 2023-05-07

【中文标题】以编程方式将模态注入 HTML 不起作用

【英文标题】：Programmatically injected modal to HTML does not function

【发布时间】：2022-01-05 18:44:28

【问题描述】：

所以目前我正在学习 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);
);

【参考方案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);

【讨论】：

@Ali 来自文档（materializecss.com/modals.html），似乎每当你想打开模式时，你都需要调用M.modal.init。由于您正在动态生成模态，因此您需要再次调用此函数，因为 modals 的实例发生了变化。所以我将该逻辑放入一个函数中，并从您动态生成的模态函数中调用它并作为 DOMContentLoaded 回调。

在你回答之前我想知道初始化是如何工作的，但现在我知道了，非常感谢你的解释。