Question

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

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');
                }
            });
      //  }
    }
});

});

Answer 1

我的问题解决了。

也可以在ajax内容中添加实例化脚本。还设置选项倍数：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中对我有用。但是没有在其他浏览器中测试

Answer 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的重复初始化。

Tooltipster不在ajax内容中工作

2 个答案: