0

まず、これはjQueryプラグインであるqtipです。http：//craigsworks.com/projects/qtip2/基本的にはかなりのツールチップになります。

mysqlデータベースの結果ページでqtipを使用していますが、最初にページをロードしたときにqtipsは完全に正常に機能します。ただし、ページに並べ替えリンクがあり、div内の情報が完全に変更されます（AJAXを使用して、データを再利用する新しいmysqlクエリを作成し、それをテーブルに配置してテーブルを置き換えることにより、新しい情報をdivに配置しますページ）。並べ替えボタンをクリックすると、qtipsが消える以外はすべて機能します。画像のキャプション（「タイトル」）にqtipsを使用しているので、並べ替えられたテーブルの画像をロールオーバーすると、通常のツールチップに戻ります。

間違っているのは、$（document）.readyは、qtipのものが最初のページの読み込み時にのみ読み込まれることを意味しているため、テーブルを変更すると、すべてのqtipが消えると思います。私の問題に関連していると思われるトピックをqtipフォーラム（http://craigsworks.com/projects/forums/thread-solved-reload-qtip-with-new-items）で見つけ、そのトピックのすべてを試しました、そして私はqtipの最新バージョンを使用しているので、live（）は非推奨であるため、live（）の代わりにon（）を使用しました。それはまだそれを修正しませんでした。コードは次のとおりです。

<script type="text/javascript">
jQuery(document).ready(function() {
    $('img[title]').on('mouseover', function() { 
        if( typeof( $(this).data('qtip') ) == 'object' ){ return; }
        $(this).qtip({
            content: {
                text: false
            },
            style: 'cream',
            position: {
                viewport: $(window)
            }
        });
        $(this).qtip('show');
    });
});
</script>
4

1 に答える 1

0

qTip設定を保存することにより、新しいコンテンツがロードされた後、同じ設定でqTipを（再）初期化するのが簡単になります。

あなたのJavaScriptを完全に把握していなければ、具体的にすることはできませんが、このようなものでうまくいくはずです：

jQuery(document).ready(function() {
    var qtipOptions = {
        content: { text: false },
        style: 'cream',
        position: { viewport: $(window) }
    };

    $('img[title]').qTip(qtipOptions);

    $("#myButton").on('click', function(){
        $.ajax({
            //...
            //...
            //...
            success(function(html){
                $("#mySelector").html(html);
                $('img[title]').qtip('destroy').qtip(qtipOptions);
            })
        });
    });
});
于 2012-07-14T09:46:26.090 に答える