2011-06-22 32 views
1

我正在使用jQuery TipTip插件在hrefs上使用「Title」標記中的數據顯示工具提示。獲取jQuery TipTip以使用Ajax加載的內容

這裏是我使用調用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絕對走在正確的道路上。

有人可以請教我嗎?

回答

4

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

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

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

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

+0

這工作的魅力。非常感謝。 –

0

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

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