Jquery方法無法檢測點擊事件

我試圖使用谷歌自定義API的圖像搜索引擎。圖像將呈現在一個網格（矩形瓷磚）中，並在點擊每個瓷磚時會彈出包含該圖像的carousal。Jquery方法無法檢測點擊事件

問題是點擊事件沒有被檢測到。由於我正在動態創建這些圖塊，因此我正在使用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); 
    } 
};

我無法瞭解到底是什麼問題。請幫助我。

謝謝！

來源

2017-09-28 Swagnik Dutta

用'$嘗試（文件） .on（'click'，'。tiles'，function（e）{' –

@AlivetoDie yes你的回答工作。謝謝！:) –

@SwagnikDutta很高興幫助你:) :) –

你需要做如下圖所示： -

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

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

如果不工作，然後去： -

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

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

參考： - jQuery event-delegation

來源

2017-09-28 08:51:54

Jquery方法無法檢測點擊事件

回答

相關問題