<分区>
我正在尝试使用谷歌自定义 API 制作图像搜索引擎。图像将呈现在网格(矩形图 block )中,单击每个图 block 时会弹出包含图像的轮播。
问题是没有检测到点击事件。由于我是动态创建这些图 block ,因此我使用了 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);
}
};
我无法理解到底是什么问题。请帮我解决这个问题。
谢谢!