Why I cannot bind event on element if overlay is append inside other function?

Question

Hello I created fancybox, but it is working just if overlay is appended to body outside of function which should start it.

So I need to append overlay everytime to body and the this function gallery.find('a').on('click', function(event) just show it. If I click on cross it will just be hidden. It is my current situation.

But I would like to append it inside my function and then if I click on cross I want to remove it.

This is not working bcz then I cannot bind dynamically added code from some reason.

This is my code:

/*
Gallery Fancybox
*/

var overlay = $('<div id="overlay"><div id="overlay__left-arrow-block"><span id="overlay__left-arrow"></span></div><div id="top-margin"></div><div id="overlay__img-wrapper"></div><div id="overlay__bottom-slider"></div><div id="overlay__right-arrow-block"><span id="overlay__right-arrow"></span></div><div id="overlay__close-btn">Zavrieť</div></div>'),
    gallery = $('.item-detail__gallery'),
    galleryImgs = gallery.find('img'),
    galleryImgWrappers = gallery.find('a'),
    image = $('<img>', {class: 'lightbox__img'}),
    loadingImg = $('<img>', {src: '/bazar/assets/img/icons/circle.svg', class: 'loading-img'});

// Create FANCYBOX
overlay.appendTo('body').hide();

// Show overlay after click on a elemet of gallery
gallery.find('a').on('click', function(event) {
    event.preventDefault();

    // Show overlay
    overlay.show();

    // Define avriables
    var galleryImgWrapperHref = $(this).attr('href'),
        thumbWrapper = $('#overlay__img-thumb-wrapper');

    // Show chosen image in overlay
    image.attr('src', galleryImgWrapperHref);

    // Show loadin image before image is loaded
    loadingImg.appendTo('#overlay__img-wrapper');

    // Image will show after it will be loaded, before loading image is showed
    image.on('load', function() {
        image.appendTo('#overlay__img-wrapper');
        loadingImg.hide(); // Hide loading image afet image was loaded
    });

    // Make images slider for thumbnails from gallery
    if (thumbWrapper.length == 0) { // add thumbs just if it was not already added
        galleryImgs.each(function() {

            var src = $(this).attr('src'),
                href = $(this).parent().attr('href');
                thumbWrapper = $('<a/>', {id: 'overlay__img-thumb-wrapper'}),
                thumbImg = $('<img>', {id: 'lightbox__img-thumb'});

            // Add thumb image src and id from original image and href to a element from original e element in gallery
            thumbWrapper.attr('href', href);
            thumbImg.attr('src', src);
            thumbWrapper.html(thumbImg); // Put image into thumbImgWrapper
            thumbWrapper.appendTo('#overlay__bottom-slider');

            // If src of thumb and main image is the same then mark thumb as active
            if ((thumbImg.attr('src').substring(thumbImg.attr('src').lastIndexOf("/") + 1) == image.attr('src').substring(image.attr('src').lastIndexOf("/") + 1))) {
                thumbWrapper.addClass('img-active');
            }
        })
    }
});

// Define objects - must be defined after it was addded to html in code above
var imageWrapper = $('#overlay__img-wrapper'),
    bottomSlider = $('#overlay__bottom-slider'),
    leftArrowGallery = $('#overlay__left-arrow-block'),
    rightArrowGallery = $('#overlay__right-arrow-block'),
    closeBtn = $('#overlay__close-btn');

// Show image in overlay if click on image Thumb from bottom slider
bottomSlider.on('click','a', function(event) {
    event.preventDefault();

    var thumbWrapperHref = $(this).attr('href'),
        thumbWrapperCurrent = $(this);

    // Remove old active class and add on current element
    bottomSlider.children().removeClass('img-active');
    thumbWrapperCurrent.addClass('img-active');

    // show loading img and so hide old image
    loadingImg.show();
    image.hide();
    image.attr('src', thumbWrapperHref);

    // After new image will be loaded show it and hide loading image
    image.on('load', function() {
        loadingImg.hide();
       image.show();
    })
});

// Overlay diappears after click
imageWrapper.on('click', function()  {
    overlay.hide();
});

// Overlay diappears after click on btn close
closeBtn.on('click', function() {
    overlay.hide();
})

// Overlay diappears after click on ESC
$(document).on('keyup',function() {
    if (event.which == 27) overlay.remove();
});

// Shift image to left if left arrow is clicked
leftArrowGallery.on('click', function() {

    var thumbWrapper = bottomSlider.find('.img-active'),
        imageActiveHref = overlay.find('.img-active').attr('href');

    // Action if it is first thumbWrapper - next wrapper is last one
    if (thumbWrapper.is(':first-child')) {
        var prevImageSrc = bottomSlider.children().last().attr('href');
        // Change current thumbWrapper to last one - add class img-active
        thumbWrapper.removeClass('img-active');
        thumbWrapperLast = bottomSlider.children().last();
        thumbWrapperLast.addClass('img-active');
    } else {
        var prevImageSrc = thumbWrapper.prev().attr('href');
    }

    // Action for thumbWrappers except last one
    if (!thumbWrapper.is(':last-child')) {
        thumbWrapper.removeClass('img-active');
        thumbWrapper.prev().addClass('img-active');
    // Action if active thumbWrapper is last chiild
    } else if (thumbWrapper.is(':last-child')) {
        thumbWrapper.removeClass('img-active');
        thumbWrapper.prev().addClass('img-active');
    }

    // show loading img and so hide old image
    loadingImg.show();
    image.hide();
    image.attr('src', prevImageSrc);

    // After new image will be loaded show it and hide loading image
    image.on('load', function() {
        loadingImg.hide();
        image.show();
    })

});

Answer 1

Do this instead

$(document).on('click', '.item-detail__gallery a', function(event) {
//Code
});

Change

bottomSlider.on('click','a', function(event) {

});

To

bottomSlider.on('click', function(event) {

});

Or if the bottom slider has child element a which you are binding the click even

$(document).on('click', '#overlay__bottom-slider a', function(event) {

});