Question

我有以下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秒，如果你从'。itmpic'鼠标移动时ajax div还没有完全加载，它将显示在页面上，没有办法隐藏它。 /> 即使mouseleave事件在div加载之前，我该怎么做才能隐藏ajax创建的div？

Answer 1

简单的逻辑变化：

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

2）而不是使用ajax用内容填充div。

3）在mouseleave上隐藏容器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');

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

Answer 2

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

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

2 个答案: