jQuery on（）在加载的元素上不起作用

Question

Im doing everything like said in documents but it just isn't firing.

    //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');
    });

First function works very well but the second one..

Situation:

• If a.video-popup is pressed, popup appears with background
• Popup elements are not in DOM when page is loaded
• Popup elements are directly under body if loaded
• If background is clicked, popup closes
• I get nothing - doesn't remove classes or give consol.log, also no errors

---

SOLUTION:

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

to

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

Answer 1

in this selector

$('document.body')

means document node which contain body class not body node

and there is no node which name is document

Try like this

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

Answer 2

Try substituting

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

for

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