Jquery on method unable to detect click event

Question

I'm trying to make an Image search engine using google custom api. The images will be rendered in a grid (rectangular tiles) and on clicking on each tile a carousal would pop up containing the image.

Problem is the click event is not being detected. Since I'm creating these tiles dynamically, I'm using the on function. But still, it doesn't work.

$('.tiles').on('click', function(e){

    console.log("clicked"); // not working
    ...
}

Here is the complete code in Jquery:

$('document').ready(function() {

    $('#search-button').click(function(){

        var keyword = $('#input-field').val();      
        fetchData(keyword);
    })

    var currentCarouselImageIdNo;

    $('.tiles').on('click', function(e){

        console.log("clicked"); // not working

        $('.carousel').toggleClass('carousel-closed');
        $('.tiles, #panel-top').toggleClass('blur');

        // extracting src of image tile
        var str = e.currentTarget.innerHTML;
        var imageStarts = str.indexOf('<img src="');

        if(imageStarts > -1){
            var i = imageStarts + 10;
            str = str.substr(i);
            str = str.substr(0,str.indexOf('"'))
        }

        // extracting id of image tile
        var nstr = e.currentTarget.innerHTML;
        var idStarts = nstr.indexOf('id="');

        if(idStarts > -1){
            var i = idStarts + 4;
            nstr = nstr.substr(i);
            nstr = nstr.substr(0,nstr.indexOf('"'))
        }
        currentCarouselImageIdNo = nstr;        

        var image = $('<img/>' , {
            src: str,
            css: {
                'max-width' : '100%',
                'max-height' : '100%',
                'margin' : 'auto auto',
                'display' : 'block',
                'box-shadow' : '0 0 3em black, 0 0 3em black',
            }
        });

        var imageBox = $('#imageBox');
        image.appendTo(imageBox);

        if( $('.carousel').hasClass('carousel-closed')){
            $('#imageBox').empty();
        } else{
            console.log('doesnot have class');
        }
    });


    $('.fa-chevron-left').click(function(){

        currentCarouselImageIdNo--;
        var prevImage_src = $(`#${currentCarouselImageIdNo}`).attr('src');
        var image = $('<img/>' , {
            src: prevImage_src,
            css: {
                'max-width' : '100%',
                'max-height' : '100%',
                'margin' : 'auto auto',
                'display' : 'block',
                'box-shadow' : '0 0 3em black, 0 0 3em black',
            }
        });

        $('#imageBox').empty();
        var imageBox = $('#imageBox');
        image.appendTo(imageBox);
    });

    $('.fa-chevron-right').click(function(){

        currentCarouselImageIdNo++;
        var prevImage_src = $(`#${currentCarouselImageIdNo}`).attr('src');
        var image = $('<img/>' , {
            src: prevImage_src,
            css: {
                'max-width' : '100%',
                'max-height' : '100%',
                'margin' : 'auto auto',
                'display' : 'block',
                'box-shadow' : '0 0 3em black, 0 0 3em black',
            }
        });

        $('#imageBox').empty();
        var imageBox = $('#imageBox');
        image.appendTo(imageBox);
    });    
});


function fetchData(keyword){

    var pm_url = `https://www.googleapis.com/customsearch/v1?key={MY_API_KEY}&cx={MY_CUSTOM_SEARCH_ENGINE_ID}&searchType=image&num=8&q=${keyword}`;

    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: 'callback',
    });
}


function photos(data) {

    var items = data.items;
    var imageLinks = [];

    for(var i=0; i<items.length; i++){
        imageLinks[i] = items[i].link;
    }

    for(var i=0; i<imageLinks.length; i++){

        var image = $('<img/>' , {
            src: imageLinks[i],
            id: i,
            css: {
                'max-width' : '100%',
                'max-height' : '100%',
                'margin' : 'auto auto',
                'display' : 'block'
            }
        });

        var imageDiv = $('<div>' , {
            class: 'col-md-3 tiles',
            css: {
                'border' : '4px solid #231f20',
                'height' : '16em',
                'background-color' : '#151414',
                'cursor' : 'pointer'
            }
        });

        image.appendTo(imageDiv);

        var galleryContainer = $('#gallery-container');
        imageDiv.appendTo(galleryContainer);
    }
};

I'm unable to understand what exactly the problem is. Kindly help me with this.

Thanks!

Answer 1

You need to do like below:-

$('#gallery-container').on('click','.tiles' function(e){

    console.log("clicked");
    ...
}

If it will not worked then go for:-

$(document).on('click','.tiles' function(e){

    console.log("clicked");
    ...
}

Reference:- jQuery event-delegation