懸停由AJAX請求生成的元素的工具提示

Question

我試圖在懸停使用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>

Answer 1

將初始化代碼放在一個單獨的函數中：

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

然后在你的回調函數（'success'部分）中添加行initTooltipster()

編輯：正如Circadian所提到的，這可能有一些性能問題，但它非常簡單，所以試試看，如果一切正常，請嘗試將工具提示綁定到特定元素......

Answer 2

問題是工具提示器尚未針對動態添加元素進行初始化。

解決方案可能是

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

雖然如果你有很多.best-item-option元素，這將是低效的，因為它將再次綁定tooltipster（我認為）。 最好使用id並將其僅添加到新元素中。