Question

早晨。

我正在尝试向动态加载的图像添加悬停事件，此外我还必须附加我悬停的元素，然后将其从悬停功能中分离出来。

该事件将首次在最初加载的内容上运行，但在此之后不会触发。

这是myjQuery：

$(document).ajaxComplete(function(){
    $('#rightImageContent img').mouseover(function() {
        $('a.spy_glass').show().appendTo('#rightImageContent');
    });
    $('#rightImageContent img').mouseout(function() {
        $('a.spy_glass').hide().detach();
    });
});

所有代码都可用here，但如果你想要更多html或jquery，请告诉我。

Answer 1

尝试mouseover中的mouseout和ajaxComplete。

如果它们是由ajax加载的话，那么正确的图像将是$('#rightImageContent img')

  $('#rightImageContent img').mouseover(function() {
        $('a.spy_glass').show().appendTo('#rightImageContent');
    });
    $('#rightImageContent img').mouseout(function() {
        $('a.spy_glass').hide().detach();
    });

Answer 2

假设"#rightImageContent始终存在：

$(function() {
    $('a.spy_glass').appendTo('#rightImageContent').hide();
    $("#rightImageContent").on({
        mouseenter: function() {
            $('a.spy_glass').show();
        },
        mouseleave: function() {
            $('a.spy_glass').hide();
        }
    }, "img");
});

我也更改了事件，因为“悬停”不是mouseover mouseout，而是mouseenter mouseleave

您也将它从dom中移除，因此选择器在删除后无法找到它。你可以像我一样切换显示屏。

Answer 3

使用.on（）

  $(document).on({mouseenter:function(){
                                        $('a.spy_glass').show().appendTo('#rightImageContent');
                                        },
                  mouseleave:function() {
                                        $('a.spy_glass').hide().detach();
                                        }},'#rightImageContent img');

Answer 4

确定了这项工作，完成工作：

$(function() {
        $("#rightImageContent").on({
            mouseenter: function() {
                $('a#spyGlass').show().appendTo('#rightImageContent');
            },
            mouseleave: function() {
                $('a#spyGlass').hide().appendTo('body');
            }
        });
    });

jQuery悬停事件（以及追加和分离）触发动态加载的内容

4 个答案: