Всплывающая подсказка q не появляется, jQuery - PullRequest
Новая
       14

Всплывающая подсказка q не появляется, jQuery

0 голосов
/ 10 декабря 2010

У меня есть сайт, на котором отображаются элементы, по 12 элементов на странице, и я могу разбивать страницы на страницы с помощью jquery.На той же странице я реализовал функцию всплывающей подсказки с помощью qTip.

При наведении на предметы появляется некоторая информация.Это работает, пока я не использую paginator, чтобы перейти на следующую страницу.

Нумерация страниц перезагружает содержимое.Но он имеет ту же структуру, что и при обновлении страницы.

Вот мой код: 

$(document).ready(function() {
 $(".cornerize").corner("5px");
 $('a#verd').live('click', exSite);
 $("a.tp").live('click', thumpsUp);
 $("a#next").click(getProgramms);
 $("a#previous").click(getProgramms);
 $("a#page").each(function() {
  $(this).click(getProgramms);
 });

 $('a.ppname[rel]').each(function(){

    $(this).qtip( {
     content : {url :$(this).attr('rel')},
     position : {
      corner : {
       tooltip : 'leftBottom',
       target : 'rightBottom'
      }
     },
     style : {
      border : {
       width : 5,
       radius : 10
      },
      padding : 10,
      textAlign : 'center',
      tip : true, 
      name : 'cream' 
     }

    });
   });

 });

HTML / DOM не меняется: 

<a class="ppname" rel="link" href="#">...</a>

qTipберет из каждого a.ppname значение rel и загружает содержимое.

1 Ответ

3 голосов
/ 10 декабря 2010

Это происходит потому, что новые элементы не автоматически "qTiped", когда они загружаются после загрузки страницы.Для обычных событий вы должны будете использовать .live() вместо .bind().

Это было решено ранее (судя по комментарию): Проблема с qTip - Советы не отображаются, потому что элементы загружаются после скрипта .

Правильный способ сделать этоявляется (из этого ответа): 

$('a.ppname[rel]').live('mouseover', function() {
    var target = $(this);
    if (target.data('qtip')) { return false; }

    target.qtip({
        overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed
        show: {
            ready: true // Needed to make it show on first mouseover event
        },
        content : {url :$(this).attr('rel')},
        position : {
            corner : {
                tooltip : 'leftBottom',
                target : 'rightBottom'
            }
        },
        style : {
            border : {
            width : 5,
            radius : 10
        },
        padding : 10,
        textAlign : 'center',
        tip : true, 
        name : 'cream' 
    });

    target.trigger('mouseover');
});
...