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()

编辑：正如 Circadian 所提到的，这可能会有一些性能问题，但它很简单，所以只要尝试，如果一切正常，尝试将 tooltipster 绑定到特定元素......

于 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 回答