让jQuery TipTip处理ajax加载的内容

Question

我正在使用jQuery TipTip插件来显示使用"Title“标签中的数据的href上的工具提示。

下面是我用来调用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 )将内容加载到正文中时，ToolTip停止工作。

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


</script>

在浏览TipTip论坛时，有人提到这可以使用jQuery .live函数工作，但在阅读了文档后，我不明白我应该如何用我的代码实现这一点。我知道jquery-live是一个事件处理程序，所以假设我可以通过ajax调用数据作为主事件，然后应用TipTip作为辅助事件，但我不知道如何实现这一点，也不知道我是否确实在走正确的道路。

有没有人能给我提个建议？

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');
    }
});