2011-06-22 8 views
1

jQuery TipTipプラグインを使用して、「タイトル」タグのデータを使用してhref上にツールチップを表示しています。ここでjQueryヒントヒントを取得して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を使用して)を介して本文にコンテンツを読み込むようにスクリプトを設定すると、ツールヒントが機能しなくなります。 TipTipフォーラムで

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


</script> 

閲覧には、誰かが私は私のコードでこれを実装することになってどのようにイム理解しない、これはjQueryの.live機能を使用して仕事ができる述べたが、ドキュメントを読みました。私はjquery-liveがイベントハンドラであることを理解していますので、私はajaxを介してデータをプライマリイベントとして呼び出して、セカンダリイベントとしてTipTipを適用できますが、これを実装する方法を理解できません。間違いなく正しい道を進む。

私に助言してもらえますか?

答えて

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'); 
    } 
}); 
関連する問題