Question

现在变得非常令人沮丧！

我创建了一个脚本，当您悬停特殊链接时，该脚本会将其他页面中的某些内容附加到正文。我也设置它，这样每当我将鼠标从链接移开时，新元素（带有加载的内容）都会隐藏。到现在为止还挺好。问题是，有时当我将光标从链接上移开太快时，脚本不会做出反应（或其他东西）。好吧，我想，只是添加了拒绝工作的恶意代码：

$('#userBubble').mouseover(function() {
    $(this).hide();
});

现在，这有什么不对吗？我尝试过使用mouseenter，但也没有运气。我也尝试将它放在$（document）.ready（）函数中 - 也没有运气。 #userBubble是悬停时加载的内容的容器，名称正确。我可以使用console.log #userBubble，所以它确实存在。

有什么想法弄乱这个吗？我没有错误，它只是不起作用。

Answer 1

确保用户ID在DOM中是唯一的，并且绑定时该元素存在（或使用live）。

将其更改为班级并使用直播。我打赌它有效。

<img id="userBubble" class="userBubble"/>

$('.userBubble').live("mouseover", function() {
    $(this).hide();
});

Answer 2

这可能是因为添加处理程序时元素尚不存在。尝试

$('#userBubble').live('mouseover', function() {
   $(this).hide();
});

代替。

Answer 3

你试过这个吗？

$('#userBubble').mouseover(function(event) {

        $(event.target).hide();

});

编辑：哦，你的问题还不太清楚就像 Spiny Norman 所说，你必须使用'live'或'delegate'; ）

Answer 4

确保在设置事件之前加载了html-div：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#test').mouseover(function () { $(this).hide(); })
        });
    </script>
</head>
<body>
    <div id="test">This will hide!</div>
</body>
</html>

Answer 5

它适用于悬停

$('#userBubble').hover(function() {
    $(this).hide();
});

http://jsfiddle.net/2n2kJ/

Answer 6

以下情况应该有效。


$(document).ready( function()
{
    $("#hoverHide").mouseover( function ()
    {
        $(this).hide();
    } );
} );

如果这不起作用，请尝试：


$(document).ready( function()
{
    $("#hoverHide").mouseover( function ()
    {
        $("#hoverHide").hide();
    } );
} );

如果这些都不起作用，您的页面上某处可能会出现语法错误。也许在.ready函数声明中。

jQuery：为什么这个元素在悬停时不会隐藏？

6 个答案: