jQuery on() 无法处理已加载的元素

Question

我按照文档中的说明进行了所有操作，但就是没有触发。

    //Magnific Popup Background Blur

    $('a.video-popup').on('click', function(e) {

        $('.main-wrapper').addClass('blur');
        $('header').addClass('blur');

        console.log('Easy!');

    });

    $('document.body').on('click','.mfp-wrap', function(e) {  //mfp-wrap is background

        console.log('Finallly!!');

        $('.main-wrapper').removeClass('blur');
        $('header').removeClass('blur');
    });

第一个功能运行良好，但第二个..

情况：

如果按下 a.video-popup，将出现带有背景的 popup
加载页面时 DOM 中不存在弹出元素
如果加载，弹出元素直接在正文下方
如果点击背景，弹出窗口关闭
我什么也没得到 - 没有删除类或提供 consol.log，也没有错误

解决方案：

$('document.body').on('click','.mfp-wrap', function(e)

到

$(document).on('click','.mfp-wrap', function(e)

Answer 1

在此选择器中

$('document.body')

表示 document 节点包含 body class 而不是 body 节点

并且没有名称为document

的节点

像这样尝试

$(document).on('click','.mfp-wrap', function(e)

Answer 2

尝试替换

$(document.body).on('click','.mfp-wrap'

对于

$('document.body').on('click','.mfp-wrap'

jQuery on() 无法处理已加载的元素

jQuery on() not working on loaded elements

javascript

jquery

magnific-popup

解决方案：