jTip工具提示没有出现，jQuery [英] qTip tooltip does not appear, jQuery

问题描述

我有一个显示项目的网站，每页12个项目，我可以使用jquery在页面中分页。在同一页面上，我使用qTip实现了工具提示功能。

I have a site that displays items, 12 items per page and I can paginate through the pages using jquery. On the same page I implemented a the tooltip feature with qTip.

将鼠标悬停在项目上会显示一些信息。这有效，直到我使用分页器转到下一页。

Hovering over the items some information appear. That works until I use the paginator to go to the next page.

分页重新加载内容。但它具有与刷新页面时相同的结构。

The pagination reloads the content. But it has the same structure as when I refresh the page.

这是我的代码：

$(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不会改变：

The html/dom does not change:

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

qTip从每个a.ppname获取rel值结束加载内容。

qTip takes from every a.ppname the rel value end loads the content.

推荐答案

这种情况正在发生，因为在页面加载后加载新元素时，它们不会自动qTiped。对于常规事件，您必须使用 .live（）而不是 .bind（）。

This is happening because new elements are not automatically "qTiped" when they are loaded after page load. For regular events, you would have to use .live() instead of .bind().

此问题已经解决（从评论中判断）： qTip问题 - 提示未显示，因为元素在脚本后加载。

This has been solved before (judging from the comment): Problem with qTip - Tips not showing because elements load after the script.

正确的方法是（从那个答案）：

The correct way to do it is (from that answer):

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

这篇关于jTip工具提示没有出现，jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！