querySelectorAll 函数的实时替代项

Question

基于本教程（这里是现场演示）

尝试在我的项目中实现此功能。如你所见

<button class="md-trigger" data-modal="modal-16">Blur</button>

触发器模态。问题是，在我的项目中，这个按钮是 ajax 结果，不会触发模态。

所以需要对modalEffects.js进行一些更改（下面的代码）。

但是不知道必须改变什么？

var ModalEffects = (function () {
    function init() {
        var overlay = document.querySelector('.md-overlay');
        [].slice.call(document.querySelectorAll('.md-trigger')).forEach(function (el, i) {
            var modal = document.querySelector('#' + el.getAttribute('data-modal')),
                close = modal.querySelector('.md-close');
            function removeModal(hasPerspective) {
                classie.remove(modal, 'md-show');
                if (hasPerspective) {
                    classie.remove(document.documentElement, 'md-perspective');
                }
            }
            function removeModalHandler() {
                removeModal(classie.has(el, 'md-setperspective'));
            }
            el.addEventListener('click', function (ev) {
                classie.add(modal, 'md-show');
                overlay.removeEventListener('click', removeModalHandler);
                overlay.addEventListener('click', removeModalHandler);
                if (classie.has(el, 'md-setperspective')) {
                    setTimeout(function () {
                        classie.add(document.documentElement, 'md-perspective');
                    }, 25);
                }
            });
            close.addEventListener('click', function (ev) {
                ev.stopPropagation();
                removeModalHandler();
            });
        });
    }
    init();
})();

Answer 1

只需允许延迟初始化阶段。

更改init(); return init;

然后，当 DOM 准备就绪并且内容已加载时，调用 ModalEffects();

然而，最好的方法是改用事件委托，这基本上是侦听容器上的事件（例如 document.body ），而不是每个单独的元素。这不仅减少了所需的事件处理程序的数量，而且还会自动考虑 DOM 更改。