jQuery的負載數據，然後對unhover

Question

隱藏我有以下代碼：

$('a.uiTip').hover(function() 
    { 
     $tip = '<div class="uiPop" style="position:absolute;top:20px;left:20px;background:#ff0000;width:300px;height:300px;z-index:9999999999;"></div>'; 

     $($tip).attr('id', $(this).attr('id')).load(AppURL + 'Organisations/Manage/Tip'); 

     $('body').append($tip); 
    }, 
    function() 
    { 
     $('.uiPopup').attr('id', $(this).attr('id')).remove(); 
    }); 

和一些鏈接：

<a id="12" class="uiTip">Link</a> 

<a id="15" class="uiTip">Link</a> 

的想法是，當用戶將鼠標懸停的鏈接稱爲uiTip它將附加div並加載一些使用ajax的內容，然後在不使用的時候再次從Dom刪除該元素。

但是它仍然在頁面上...任何想法爲什麼以及如何解決這個問題？

似乎是將id附加到我的身體而不是提示！

Answer 1

$tip在remove函數中不可用。 分配一些ID，然後通過ID中刪除該對象：

$('a.uiTip').hover(function() { 
     $tip = '<div id="theTipIsHere" class="uiPopup" style="position:absolute;top:20px;left:20px;background:#ff0000;width:300px;height:300px;z-index:9999999999;"></div>'; 
     $(this).append($tip).load(AppUrl + '/Organisations/Ajax/OrganisationDetailsTip'); 
    }, 
    function() { 
     $('#theTipIsHere',this).remove(); 
    }); 

Answer 2

的$尖端變量在懸停在方法的局部範圍內聲明，所以不會從懸停出法訪問。的$(this)

$('a.uiTip').hover(function() { 
      $tip = '<div class="uiPopup" style="position:absolute;top:20px;left:20px;background:#ff0000;width:300px;height:300px;z-index:9999999999;"></div>'; 
      $(this).append($tip).load(AppUrl + '/Organisations/Ajax/OrganisationDetailsTip'); 
     }, 
     function() { 
      $(".uiPopup", $(this)).remove(); 
     }); 

Answer 3

$('a.uiTip').hover(function() { 
      $tip = '<div class="uiPopup" style="position:absolute;top:20px;left:20px;background:#ff0000;width:300px;height:300px;z-index:9999999999;"></div>'; 

      $newtip = $($tip).attr('id', $(this).attr('id')).load(AppURL + 'Organisations/Manage/Tip'); 

      console.log($newtip); 

      $('body').append($newtip); 
     }, 
     function() { 
      $('.uiPopup').remove(); 
     });