带有附加功能的 Jquery LIVE 正在破坏 MouseOver答案

【问题标题】：Jquery LIVE, with an append, is breaking the MouseOver带有附加功能的 Jquery LIVE 正在破坏 MouseOver
【发布时间】：2010-07-18 03:13:38
【问题描述】：

代码如下：

<p>Morbi vitae erat. Cras sem lorem, porta ut, aliquam id, porta sed, velit.
Pellentesque scelerisque erat rhoncus nulla. <span class="findme">find me</span>Integer pulvinar, est ut</p>

<script type="text/javascript">
$(document).ready(function() {

    $('.findme').live('mouseover mouseout', function(event) {
        if (event.type == 'mouseover') {
            // do something on mouseover
            $(this).css("background", "red");
            $(this).append('<span id="dropdown">XXX</span>');
        } else {
            // do something on mouseout
            $(this).css("background", "transparent");
            $('#dropdown').remove();
        }
    });

});
</script>

我希望下拉元素出现在下一个元素旁边，以允许用户在将鼠标移到上方时更改设置。问题是当鼠标在 XXX 上滚动时，它会触发鼠标移出，即使它在 .findme 内。有什么想法吗？或者有更好的方法来实现这种效果？

【问题讨论】：

你能举个例子吗？
我没有服务器。我正在使用 1.4.2
有免费的网络主机。让它发生。
+1，我也遇到了这个奇怪的问题。

标签： jquery append bind live

【解决方案1】：

这是mouseout 的标准行为。如果您使用的是 jQuery 1.4，那么您应该将 mouseover / mouseout 替换为 mouseenter / mouseleave。

编辑：一些示例代码：

$(document).ready(function() {

    $('.findme').live('mouseenter', function(event) {
        $(this).css("background", "red");
        $(this).append('<span id="dropdown">XXX</span>');
    }).live('mouseleave', function(event) {
        $(this).css("background", "transparent");
        $('#dropdown').remove();
    });

});

【讨论】：

你能举个例子吗，我正在尝试，但它不起作用
发布此问题的示例。您有 90% 的机会在您的网页上做错了事，如果不以易于查看的方式发布您实际拥有的内容，我们将无能为力。
它在 iframe 中，这会是问题吗？
你能在jsbin.com举个例子吗例如：jsbin.com/utodi3

【解决方案2】：

尝试使用 mouseenter 和 mouseleave。

.live({
    mouseenter:
       function()
       {

       },
    mouseleave:
       function()
       {

       }
   }
);

【讨论】：

【解决方案3】：

这最终正常工作：

$(".findme").mouseenter(function(){
    // do something on mouseover
    $(this).css("background", "red");
    $(this).append('<span id="dropdown">edit</span>');
}).mouseleave(function(){
    // do something on mouseout
    $(this).css("background", "transparent");
    $('#dropdown').remove();
});

希望这可以帮助其他有类似需求的人。

【讨论】：

你不妨接受这个答案，让别人知道你已经解决了问题。