开发者

Getting jQuery TipTip to work with ajax loaded content

I am using the jQuery TipTip plugin to display tooltips on hrefs using data from the "Title" tag.

Here is the code i am using to invoke 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 -->

and in the body

sample content. <a href=开发者_C百科"" class="someClass" title="test data">sample</a>,stuff.

This works fine as standalone example. However, when i set the script up to load the content into the body via ajax (using sample.html that contains the original body code), the ToolTip stops working.

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


</script>

Browsing in the TipTip forums, someone mentioned this could work using the jQuery .live function, but having read the documentation, i dont understand how im supposed to implement this with my code. I understand that jquery-live is an event handler, so supposedly, i could call in the data via ajax as the primary event and then apply TipTip as a secondary event, but i cant figure out how to implement this, and dont know if im definitely going down the right path.

Could someone please advise me?


An easy solution would be to create a function that activates TipTip:

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

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

Not very elegant, but should work though.


This code will make it so that any link that has a title attribute will have TipTip's functionality applied to it:

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

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

Source: https://drew.tenderapp.com/discussions/tiptip/73-tiptip-and-jquery-live


This is my solution for this problem:

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜