Question

我使用jQuery TipTip插件使用“Title”标签中的数据显示hrefs上的工具提示。

以下是我用来调用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作为辅助事件应用，但我无法弄清楚如何实现这一点，并且不知道是否即时通讯肯定是走正确的道路。

有人可以告诉我吗？

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

获取jQuery TipTip以使用加载了ajax的内容

3 个答案: