獲取jQuery TipTip以使用Ajax加載的內容

Question

我正在使用jQuery TipTip插件在hrefs上使用「Title」標記中的數據顯示工具提示。

這裏是我使用調用TipTip

<script type="text/javascript" src="jquery.tipTip.js"></script> 
<!-- ToolTip script --> 
<script type="text/javascript"> 
$(function(){ 
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10}); 
}); 
</script> 
<!-- End ToolTip script --> 

的代碼，並在體內

sample content. <a href="" class="someClass" title="test data">sample</a>,stuff. 

這工作得很好作爲獨立的例子。但是，當我將腳本設置爲通過ajax（使用包含原始主體代碼的sample.html）將內容加載到主體中時，工具提示停止工作。

<script type="text/javascript"> 
//loading sample ajax data 
$(document).ready(function(){ 
$('#remote').load('sample.html'); 
}); 


</script> 

瀏覽在TipTip論壇上，有人提到這可能使用jQuery .live功能工作，但已經閱讀文檔，我不明白應該如何即時與我的代碼來實現這一點。據我所知，jquery-live是一個事件處理程序，所以據說我可以通過ajax作爲主事件調用數據，然後將TipTip作爲輔助事件應用，但我無法弄清楚如何實現這個，不知道如果im絕對走在正確的道路上。

有人可以請教我嗎？

Answer 1

一個簡單的解決方案是創建一個激活TipTip功能：

function activateTipTip() { 
    $(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10}); 
} 

$(document).ready(function(){ 
    activateTipTip(); 
    $('#remote').load('sample.html', function() { 
     activateTipTip(); 
    }); 
}); 

不是很優雅，但應該工作，雖然。

Answer 2

此代碼將讓這個具有title屬性都將應用它TipTip的功能的任何鏈接：

$('a[title]').live('mouseover', function() 
{ 
    $(this).tipTip({ 
     delay: 200, 
     maxWidth: '400px' 
    }); 

    $(this).trigger('mouseenter'); 
}); 

來源：https://drew.tenderapp.com/discussions/tiptip/73-tiptip-and-jquery-live

Answer 3

這是我對這個問題的解決方案：

$(ElementParent).on('mouseover', YourElementSelector, function() 
{ 
    if($(this).data('hasTipTip') !== true) 
    { 
     $(this).tipTip(TipTipOptions); 
     $(this).data('hasTipTip', true); 
     $(this).trigger('mouseover'); 
    } 
});