JavaScript警報回調在函數內部不起作用

Question

我正在嘗試制作一個包含約5-6張圖像的圖像預覽，當用戶將鼠標懸停在圖像上時，它們會陸續出現（不像帶有上一個和下一個按鈕的輪播）。 這是我到目前為止收集的小提琴 。.我不知道這種方法是否正確..但由於警報回調不起作用，我被卡住了。 有人可以告訴我怎么了嗎？

$(function() 
  {
      var imageCount = $('#product_grid_list').find('figure')[0].getElementsByTagName('img');

      for (var i = 0, n = imageCount.length; i < n; i++) {
          imageCount[i].on('click', function(e) 
              {
                  alert('Everything is going fine!');
              }          
          );
      }
  }
);

Answer 1

您正試圖調用on()一個jQuery方法，在一個HTMLElement （DOM元素）。 您不能這樣做，只能在jQuery集合上調用jQuery方法。 可以輕松獲取所需元素的jQuery集合：

• 使用.find()匹配圖像
• 不需要for for()循環，jQuery的.on()將為您處理循環。
• 您可能還想防止錨的默認行為

$(function () {
    var imageCount = $('#product_grid_list').find('figure img');
    imageCount.on('click', function (e) {
        e.preventDefault()
        alert('Everything is going fine!');
    })
});

JSFiddle

Answer 2

您正在同時使用js和jQuery。 這是不對的。 如果使用jQuery，則click事件將如下所示：

$(document).('click', '#product_grid_list figure img', function(){
     alert('Everything is going fine!');
});

Answer 3

您正在混合使用jQuery和獨立javascript。 您不妨一路使用jQuery，例如：

$('#product_grid_list figure:first img').click(function(e) {
      alert('Everything is going fine, hopefully!');
   });

您沒有發送相應的HTML，因此我們無法測試以上內容是否正確。

Answer 4

這只是jQuery中的簡單點擊事件，無需使用js： http : //jsfiddle.net/wP3QQ/11/

$('#product_grid_list').find('figure img').click(function(e){
    alert('Everything is going fine!');
    e.preventDefault();
    });

Answer 5

您需要懸停效果，因此不應在此處使用click事件。 應該是鼠標懸停。

工作小提琴

代碼段：

$(document).on('mouseover','#product_grid_list  figure  img',function(e){
      alert("now it is working");
});

Answer 6

無法觸發點擊事件回調的根本原因是，您試圖以jQuery方式在“ DOM”（在本例中為imageCount [i] ）元素上注冊事件處理程序。 如果您想使用純JavaScript解決方案，請嘗試像這樣注冊事件處理程序：

imageCount[i].addEventListener('click', function(e){
    alert('Everything is going fine!');
});

這是一個jsfiddle演示 。

注意：在這種情況下，我沒有考慮跨瀏覽器的問題。

順便說一句，嘗試緩存imageCount節點列表的長度，它將提高性能。