繁体   English   中英

JavaScript警报回调在函数内部不起作用

[英]JavaScript alert callback not working inside a function

我正在尝试制作一个包含约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!');
              }          
          );
      }
  }
);

您正试图调用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

您正在同时使用js和jQuery。 这是不对的。 如果使用jQuery,则click事件将如下所示:

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

您正在混合使用jQuery和独立javascript。 您不妨一路使用jQuery,例如:

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

您没有发送相应的HTML,因此我们无法测试以上内容是否正确。

这只是jQuery中的简单点击事件,无需使用js: http : //jsfiddle.net/wP3QQ/11/

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

您需要悬停效果,因此不应在此处使用click事件。 应该是鼠标悬停。

工作小提琴

代码段:

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

无法触发点击事件回调的根本原因是,您试图以jQuery方式在“ DOM”(在本例中为imageCount [i] )元素上注册事件处理程序。 如果您想使用纯JavaScript解决方案,请尝试像这样注册事件处理程序:

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

这是一个jsfiddle演示

注意:在这种情况下,我没有考虑跨浏览器的问题。

顺便说一句,尝试缓存imageCount节点列表的长度,它将提高性能。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM