Tooltipster 在 ajax 内容中不起作用

Posted 2023-05-07

【中文标题】Tooltipster 在 ajax 内容中不起作用

【英文标题】：Tooltipster not working in a ajax content

【发布时间】：2014-06-09 12:04:24

【问题描述】：

在堆栈溢出中搜索时。我发现我也面临一个老问题。但没有人回答。 所以只是想知道有人对此有任何想法

How to get jquery Tooltipster Plugin to work for newly created DOM elements?

以下是我的代码

$(document).ready(function() 
$('.test_link').tooltipster(
    interactive:true,   
    content: 'Loading...',
    functionBefore: function(origin, continueTooltip) 
        continueTooltip();      
        // next, we want to check if our data has already been cached
        //if (origin.data('ajax') !== 'cached') 
            $.ajax(
                type: 'POST',
                url: 'example.php',
                success: function(data) 
                    // update our tooltip content with our returned data and cache it
                    origin.tooltipster('content', $(data)).data('ajax', 'cached');
                
            );
      //  
    
);

);

【参考方案1】：

我的问题解决了。

只需在 ajax 内容中添加实例化脚本即可。 还设置选项multiple:true

即

$(document).ready(function() 
$('.test_link').tooltipster(
    interactive:true, 
    multiple:true,
    content: 'Loading...',
    functionBefore: function(origin, continueTooltip) 
        continueTooltip();      
        // next, we want to check if our data has already been cached
        //if (origin.data('ajax') !== 'cached') 
            $.ajax(
                type: 'POST',
                url: 'example.php',
                success: function(data) 
                    // update our tooltip content with our returned data and cache it
                    origin.tooltipster('content', $(data)).data('ajax', 'cached');
                
            );
      //  
    
);

);

它在 Firefox 中对我有用。但没有在其他浏览器中测试

【参考方案2】：

我知道这是一篇旧帖子，问题已解决，但我最近需要类似的东西。

在每个 ajax 函数上添加初始化并不是一个解决方案，因为我们在页面上动态加载了多个内容，因此找到的最简单的解决方案是：

$(document).on('mouseenter', '[data-toggle="tooltip"]', function()
        if ($(this).is('.tooltipstered')) 
            // Do nothing
         else 
            $(this).tooltipster(
                delay: 50,
                // Your other Tooltipster options
            );
            $(this).mouseover();
        
);

$('[data-toggle="tooltip"]') 是 OP 的 $('.test_link')。

if阻止文件mouseenter的重复初始化。