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

Question

早晨。

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

该事件将在最初加载的内容上第一次起作用，但在此之后不会触发。

这是我的jQuery：

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

所有代码都可以在这里找到，但如果你想要更多的 html 或 jquery，请告诉我。

Answer 1

尝试进出。mouseover_mouseoutajaxComplete

$('#rightImageContent img')无论是否由 ajax 加载，正确的图像将始终存在

  $('#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

好的，让它工作，完成工作：

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

Answer 4

使用 .on()

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