0

tablesorter を使用して、結果をテーブルにページ付けしています。また、列の 1 つにツールチップが表示され、承認された時間が表示されます。テーブルの最初の 10 件の結果 (デフォルトで読み込まれる) には、ツールチップが正しく表示されます。次のページに切り替えると、カーソルを合わせると、JS によってトリガーされるツールチップではなく、デフォルトのブラウザ タイトルのツールチップが表示されます。これは、ページネーションによって最初に隠されているコンテンツではなく、JS のロード方法によるものだと思います。ツールチップを呼び出す方法は次のとおりです。

$(document).ready(function () {
                     if ($("[rel=tooltip]").length) {
                     $("[rel=tooltip]").tooltip();
                     }
                   });

そして、リンクを表示するだけです：

//This link displays my fancy tooltip correctly//
<a href="#" style="color:#000;" rel="tooltip" title="Monday January 28th 2013 12:11 PM">

//This link does not//
<a href="#" style="color:#000;" rel="tooltip" title="Monday January 28th 2013 01:25 PM">

先ほど言ったように、2 つの行の唯一の違いは、ページが読み込まれるときに一方が読み込まれ、もう一方がページに表示される行の量を変更するか、次のページに移動することによってトリガーされることです (ちなみに、これは JS です)。実際にはページの場所は変更されません)。行は MySQL から生成されますが、最初の 10 個は機能しますが、それ以降は機能しません。私の結論は正しいですか？他に何か不足している可能性はありますか？アドバイスをありがとう！

編集:私は、私の混乱に貢献していることを追加します。ページネーターは、実際には html ソースから行を非表示にしません。ブラウザウィンドウに表示されないだけです。

4

2 に答える 2

0

私の仮定は、AJAX 経由でページを読み込んでいるということです。この場合、AJAX 呼び出しの成功時にツールチップの定義を思い出す必要があります。これは次のように行うことができます。

function initTooltip(){
if ($("[rel=tooltip]").length) {
                     $("[rel=tooltip]").tooltip();
                     }
}

$(document).ready(function () {
                     initTooltip();
                   });

$.ajax({
 /* some code */
 success: function(){
initTooltip();
}});

注: これはコード全体ではありません。これにより、問題を処理する方法がわかります。

于 2013-02-05T14:51:31.827 に答える
0

あなたの tooltip() は、結果のリストの最初のエントリで動作しているようです。

$("[rel=tooltip]")

これは常にリストを返します.1つだけが見つかった場合、すべての機能が正しく機能していることは「素晴らしい」ことです。

それを機能させるには、すべてをループしてみてください

$(function(){
    $("[rel=tooltip]").each(function(){
        $(this).tooltip();
    });
});
于 2013-02-05T14:50:35.083 に答える