jquery如何在mouseleave上隐藏ajax加载的div？答案

【问题标题】：jquery how-to hide ajax loaded div on mouseleave?jquery如何在mouseleave上隐藏ajax加载的div？
【发布时间】：2013-12-12 16:56:47
【问题描述】：

我有以下 jquery 事件：

$('#items').on({ mouseenter: function () {  // picshow
     itmid = $(this).attr('rel');
     var itmlink = '/scripts/iteminfo.pl?itmid='+itmid;
    $('main').append('<div id="spinner"></div>');               
    $.get(itmlink, function(data){
        var addedhtml = data;
            $('#tblitems').append('<div id="pic'+itmid+'">'+addedhtml+'</div>');
            $('#spinner').remove();
    }); 
   }, mouseleave: function () {
    $('#pic'+itmid).hide();
      }
}, '.itmpic');

'.itmpic' - 是一个动态创建的 div。
当鼠标悬停在该 div 上时，jquery 获取 'rel' 属性值并使用 ajax 函数 $.get()
使用该参数调用脚本问题是加载需要一些时间 ~ 1-2 秒，如果在 ajax div 尚未完全加载时从“.itmpic”鼠标离开，它将显示在页面上并且无法隐藏它。
即使 mouseleave 事件发生在 div 加载之前，我该怎么做才能隐藏 ajax 创建的 div？

【问题讨论】：

变量itmid 是mouseenter 处理程序的本地变量，因此在mouseleave 处理程序中尝试$(this).attr('rel') 而不是itmid，如$('#pic' + $(this).attr('rel')).hide();
抱歉，打错了，itmid 是全局变量 - 我在第一条消息中修复了它。
@httpd 你试过我的建议了吗？反馈？
我在上面回答，这是我最初的信息中的一个错字。:) salivan 的解决方案对我有用 :)
Arun P Johny 谢谢，这也是有用的评论，顺便说一句，这是从 mouseenter: function() -> mouseleave: function () 传递变量的最佳方式吗？

标签： jquery

【解决方案1】：

简单的逻辑变化：

1) 在ajax调用之前创建容器div。

2) 比使用 ajax 来填充 div 的内容。

3) 在鼠标离开时隐藏容器 div。

$('#items').on({ mouseenter: function () {  // picshow
    var itmid = $(this).attr('rel'),
        itmlink = '/scripts/iteminfo.pl?itmid='+itmid;
    $('main').append('<div id="spinner"></div>');
    $('#tblitems').append('<div id="pic'+itmid+'"></div>');               
    $.get(itmlink, function(data){
        var addedhtml = data;
            $('#pic'+itmid).html(addedhtml);
            $('#spinner').remove();
    }); 
   }, mouseleave: function () {
    $('#pic'+itmid).hide();
      }
}, '.itmpic');

从而以简单的方式避免您的所有麻烦。我无法在任何地方进行测试，但它应该可以工作。

【讨论】：

@httpd 太好了，很高兴能帮上忙！ :)

【解决方案2】：

您可以在 mouseleave 处理程序中设置一个变量，然后检查 ajax 响应。如果设置了变量，则隐藏新元素。您还必须清除 mouseenter 函数中的变量。

【讨论】：