[英]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()
循环,jQuery的.on()
将为您处理循环。 $(function () {
var imageCount = $('#product_grid_list').find('figure img');
imageCount.on('click', function (e) {
e.preventDefault()
alert('Everything is going fine!');
})
});
您正在同时使用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.