Получение jQuery TipTip для работы с загруженным содержимым ajax - PullRequest
1 голос
/ 22 июня 2011

Я использую плагин jQuery TipTip для отображения всплывающих подсказок на hrefs, используя данные из тега "Title".

Вот код, который я использую для вызова 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 в качестве вторичного события, но я не могу понять, как это реализовать, и не знаю, если яопределенно идет по правильному пути.

Может кто-нибудь, пожалуйста, посоветуйте мне?

Ответы [ 3 ]

4 голосов
/ 22 июня 2011

Простым решением было бы создание функции, которая активирует подсказку:

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

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

Не очень элегантно, но должно работать.

1 голос
/ 21 октября 2011

Этот код сделает так, что к любой ссылке, имеющей атрибут 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

0 голосов
/ 24 июня 2012

Это мое решение для этой проблемы:

$(ElementParent).on('mouseover', YourElementSelector, function()
{   
    if($(this).data('hasTipTip') !== true)
    {
        $(this).tipTip(TipTipOptions);
        $(this).data('hasTipTip', true);
        $(this).trigger('mouseover');
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...