添加单击事件以向子项调用函数？

Question

我的div只包含img。每个img都有一个唯一的ID。单击时，我想将其传递给函数以更改图像。

我试过了：

$(".gallery_thumbs").children('img').click(function(){
    alert("go click !="+this.id);
    gotoImage(this.id);
})

警告是测试我正在将正确的内容传递给gotoImage函数，但我没有让click事件绑定。我怎么能做到这一点？

Answer 1

您可能在DOM准备好之前绑定事件，我建议使用.on()：

$(".gallery_thumbs").on('click', 'img', function(){
    alert("go click !="+this.id);
    gotoImage(this.id);
});

没有必要在$(document).ready()中包含该函数，因为每次绑定事件时on都会检查！

Answer 2

假设您已正确地将代码放入$(function() { ... })，请尝试以下操作：

$(".gallery_thumbs img").click(...);

Answer 3

你可以使用：

$('.gallery_thumbs > img').on('click', function(){
    alert($(this).attr('id'));
});

Answer 4

你也可以尝试这个..

$(function() {
    $(".gallery_thumbs").find("img").click( function() {
        alert("go click !="+this.id);
        gotoImage(this.id);
    });
});

Answer 5

我通过在div中为所有拇指添加一个类然后通过类应用click事件来解决它，更短更容易

$(".thumb").click(function(){
    //alert("go click !="+this.id);
   gotoImage(this.id);
})