AJAX加载的foreach循环内容中模态窗口脚本失效的问题求助

嘿，我来帮你排查这个问题！你的滚动加载功能正常，但动态加载出来的城市条目里的模态窗口打不开，核心原因是事件绑定的时机不对——你的模态窗口事件是在DOMContentLoaded里绑定的，这时候只有页面初始加载的DOM元素能拿到事件，而AJAX动态加载出来的新元素（就是foreach生成的那些带data-modal的链接和模态框），在绑定事件的时候还不存在于DOM中，自然没法触发点击事件。

另外先提个小笔误：你的滚动事件监听写的是scroll2，应该改成scroll，不然滚动加载的逻辑可能也会出问题哦：

// 把这个
window.addEventListener('scroll2', () => {
// 改成
window.addEventListener('scroll', () => {

接下来是模态窗口的核心修复方案，用事件委托来替代直接给元素绑定事件，这样不管是初始DOM还是后来动态添加的元素，都能触发模态窗口：

修改你的模态窗口脚本部分，把原来的mOpen循环绑定代码替换掉，具体修改如下：

// МОДАЛЬНОЕ ОКНО //

document.addEventListener('DOMContentLoaded', () => {
    const overlay = document.querySelector('.modal__overlay'),
          modals = document.querySelectorAll('.modal__body'),
          mClose = document.querySelectorAll('[data-close]');

    // 用事件委托替代原有的mOpen循环绑定
    document.addEventListener('click', function(e) {
        // 判断点击的元素是否带有data-modal属性
        if (e.target.hasAttribute('data-modal')) {
            // 调用modalShow，同时把this指向点击的元素
            modalShow.call(e.target);
        }
    });

    for (let el of mClose) {
        el.addEventListener('click', modalClose);   // 关闭按钮的绑定可以保留，或者也改成事件委托
    }

    document.addEventListener('keydown', modalClose);

    function modalShow() {
        let modalId = this.dataset.modal;
        document.getElementById(modalId).classList.add('open');
        overlay.classList.add('open');
    }

    function modalClose(event) {
        if ( event.type != 'keydown' || event.keyCode === 27 ) {
            for (let modal of modals) {
                modal.classList.remove('open');
                overlay.classList.remove('open');
            }
        }
    }
    
})

 // -- //

为什么这样能行？事件委托利用了DOM的事件冒泡机制——不管点击的是哪个元素，事件都会向上冒泡到document层面，我们在这里判断点击的元素是不是我们要找的带data-modal的链接，是的话就执行模态窗口打开逻辑，这样哪怕是AJAX动态加载出来的新元素，也能被捕获到点击事件。

如果你想更精准一点，也可以把事件委托绑定在#cities这个父元素上，而不是document，这样性能会更好一点：

document.getElementById('cities').addEventListener('click', function(e) {
    if (e.target.hasAttribute('data-modal')) {
        modalShow.call(e.target);
    }
});

这样修改之后，你动态加载出来的每个城市条目里的“Удалить”链接应该就能正常打开对应的模态窗口啦！

备注：内容来源于stack exchange，提问作者Hunter o_0