3

AJAX を使用して動的に生成されたコンテナーのホバー時にTooltipsterプラグインを使用してツールチップを追加しようとしています。私はこれに非常に苦労しており、これを何日も理解しようとしています。注: エラーは発生していません。Tooltipster は ajax 以外の要素に取り組んでいます。

これを実装する方法についての提案に感謝します。

よろしくお願いします！

JavaScript / AJAX 呼び出し

    $.ajax({
            url: "get-data.php?bestItems=1",
            dataType: "html",
            success: function(data){
                $(".best-items-container").html(data).show();
            }
        });

ツールチップの初期化 / イベント

         $('.best-item-option').tooltipster({ 
            custom: 'hover',
            onlyOne: true,    // allow multiple tips to be open at a time
            position: 'left',  // display the tips to the left of the element
            theme: '.my-custom-theme'
        });
        $(document).on('hover', '.best-item-option', function(){        
            $('.best-item-option').tooltipster('show');
        });

動的 HTML スニペット (PHP)

<div class="best-items-container">
    <div class="best-item-option" title="Testing Tooltip">
        <div class="hotItemName">'. $data['name'][$i].'</div>
    </div>
</div>
4

2 に答える 2

2

初期化コードを別の関数に入れます。

function initTooltipster(){
..the init code here....
}

次に、コールバック関数（「成功」部分）に次の行を追加しますinitTooltipster()

編集: サーカディアンで言及されているように、これにはいくつかのパフォーマンスの問題がある可能性がありますが、それは非常に単純なので、試してみて、すべてがうまく機能する場合は、ツールチップスターを特定の要素にバインドしてみてください...

于 2013-04-17T12:38:51.027 に答える
0

問題は、動的に追加された要素に対してツールチップスターが初期化されていないことです。

解決策は

$(document).on('hover', '.best-item-option', function(){        
    $('.best-item-option').tooltipster();
    $('.best-item-option').tooltipster('show');
});

ただし、多くの.best-item-option要素がある場合、ツールチップスターが再びバインドされるため、これは非効率的になります (私は思います)。id を使用して、新しい要素にのみ追加することをお勧めします。

于 2013-04-17T12:31:42.010 に答える