基于this tutorial (这里是直播demo)
尝试在我的项目中实现此功能。正如你所看到的
<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();
})();
最佳答案
只允许延迟初始化阶段。
将 init();
更改为 return init
;
然后当 DOM 准备好并且内容已加载时,调用 ModalEffects();
但是,最好的方法是使用事件委托(delegate),这基本上是监听容器上的事件(例如 document.body
)而不是每个单独的元素。这不仅减少了所需的事件处理程序的数量,而且还自动考虑 DOM 更改。
关于javascript - querySelectorAll 函数的实时替代方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18967398/