Question

我正在尝试使用谷歌自定义API制作图像搜索引擎。图像将以网格（矩形图块）呈现，并且在点击每个图块时，将弹出包含图像的carousal。

问题是未检测到点击事件。由于我是动态创建这些图块，因此我使用的是on函数。但是，它仍然不起作用。

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

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

以下是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);
    }
};

我无法理解究竟是什么问题。请帮助我。

谢谢！

Answer 1

您需要执行以下操作： -

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

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

如果不起作用，请转到： -

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

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

参考： - jQuery event-delegation

Jquery on方法无法检测到click事件

1 个答案: