0

アイテムを表示するサイトがあり、ページごとに 12 個のアイテムがあり、jquery を使用してページをページ分割できます。同じページで、qTip を使用してツールチップ機能を実装しました。

項目にカーソルを合わせると、いくつかの情報が表示されます。これは、ページネーターを使用して次のページに移動するまで機能します。

ページネーションはコンテンツをリロードします。しかし、ページを更新したときと同じ構造になっています。

これが私のコードです：

$(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 値を取得し、コンテンツをロードします。

4

1 に答える 1

3

これは、新しい要素がページの読み込み後に読み込まれるときに、自動的に「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');
});
于 2010-12-10T11:47:45.953 に答える