jquery 事件没有触发

Question

我有两个事件放在 $('$gallery_slide_main_thumbs img') 上，当我调用它们时没有被触发。 悬停和点击功能都没有被调用。 当我将鼠标悬停在图像上时，鼠标指针会发生变化。

查询：：

$('#gallery_slide_main_thumbs img').hover(function(){
    $(this).animate({
        opacity: 1
    });
}, function(){
    $(this).animate({
        opacity: .66
    });
});

<div id="gallery_slide_main_thumbs"></div>

#gallery_slide_main_thumbs{
    width: 100%;
    height: 100px;
    position: absolute;
    z-index: 6;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    margin: 0;
    text-align: center;
}
#gallery_slide_main_thumbs img{
    margin: 5px;
    cursor: pointer;
    opacity: .66;
}

$('#gallery_slide_main_thumbs img').click(function(){
    $('#gallery_slide_main_thumbs img').eq(gallery_active_id).css({
        'border': '',
        'border-radius': '',
        'margin-bottom': ''
    });
});

id 为“gallery_slide_main_thumbs”的 div 在启动时创建，并在调用另一个函数时填充图像，

编辑： on.('click','img',function(){}) 不能解决问题。

Answer 1

您需要通过应用.on()为动态创建的元素使用事件委托：

$('#gallery_slide_main_thumbs').on('click','img',function() {
   $('#gallery_slide_main_thumbs img').eq(gallery_active_id).css({
       'border': '',
       'border-radius': '',
       'margin-bottom': ''
    });
});

对于.hover()事件，您可以使用：

$('#gallery_slide_main_thumbs').on('mouseenter', 'seconddiv', function( event ) {
    $(this).animate({
        opacity: 1
    });
}).on('mouseleave', 'seconddiv', function( event ) {
    $(this).animate({
        opacity: .66
    });
});

Answer 2

我相信图像将动态插入到以下 div 中：

<div id="gallery_slide_main_thumbs"></div>

所以这意味着图像不存在于初始标记中，并将作为其他事件的结果添加到 div 中。

在这种情况下，旧的事件绑定就不起作用了。 所以这里涉及另一种现象，称为事件委托

阅读有关此内容的更多信息 => https://learn.jquery.com/events/event-delegation/

所以你的情况下的通用代码是。

$(element).on('click',function(){});
$(element).on('hover',function(){});

我希望这对你有用。 如果您在这方面需要更多帮助，请告诉我。

Answer 3

部分同意 Talha Masood，但此事件作为完整代码需要编写在document.ready事件上或作为函数调用。 所以，可能类似于以下内容：

$(document).ready(function(){
    $(element).on('click',function(){});
    $(element).on('hover',function(){
    });
});

如果每个人都同意，请告诉我。