Javascript 工具提示在开始时工作不正常_Javascript_Jquery_Ajax_Tooltipster

Javascript 工具提示在开始时工作不正常

javascript jquery ajax

Javascript 工具提示在开始时工作不正常,javascript,jquery,ajax,tooltipster,Javascript,Jquery,Ajax,Tooltipster,我正在使用tooltipster插件工具，在这里我用一些td给定id绘制了甘特图。因此，定义了哪个id，并将鼠标移到该id上，将获得ajax数据并相应显示。下面是我的代码片段。这里的问题是工具提示只在我用鼠标点击td几次后才会出现。从那以后，它工作得很好。我可以在调试窗口中看到ajax页面被调用，也可以看到此错误 Tooltipster:一个或多个工具提示已附加到此元素：忽略。使用“多个”选项可以附加更多工具提示。jquery.tooltipster.min.js:1 $(document)

我正在使用tooltipster插件工具，在这里我用一些td给定id绘制了甘特图。因此，定义了哪个id，并将鼠标移到该id上，将获得ajax数据并相应显示。下面是我的代码片段。这里的问题是工具提示只在我用鼠标点击td几次后才会出现。从那以后，它工作得很好。我可以在调试窗口中看到ajax页面被调用，也可以看到此错误

Tooltipster:一个或多个工具提示已附加到此元素：忽略。使用“多个”选项可以附加更多工具提示。jquery.tooltipster.min.js:1

  $(document).ready(function () {

      $('td[id]').tooltipster({
    // content: 'Loading...',
     functionBefore: function(origin, continueTooltip) {
        // We'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
        continueTooltip();
        var idval=0;
        // Next, we want to check if our data has already been cached
        //if (origin.data('ajax') !== 'cached') {
            $.ajax({
                type: 'GET',
                url: 'getDetails.php',
                data:idval,
                success: function(data) {
                    // Update our tooltip content with our returned data and cache it
                    //alert("Data is : "+data);
                    var finalData = 'Total Data : 300 <br> Total Completed : 200';

                    //alert("DATA");
                    //origin.tooltipster: $('<span>testst<strong>This text is in bold case !</strong></span>')

                   origin.tooltipster({
                        content: finalData,
                        multiple: true,
                        contentAsHTML: true
                    });

                    //origin.tooltipster({content: data,contentAsHTML: true}).data('ajax', 'cached');
                }
            });
        //}
    }
  });

});

Tooltipster插件真的应该在所有这些之前初始化。每次用户将鼠标悬停在某个元素上时，使用mouseenter-enter来触发它的初始化，这不是一个很好的实践，也是您的问题的根源。理想情况下，您希望将其分解为以下几部分：

查找已定义id的元素。将工具提示应用于这些元素。让tooltipster从那里处理一切。 1.寻找你的元素借助jQuery的魔力，您可以通过巧妙地使用选择器来获取这些，而不是通过最初的实现来查询更大的集合，从StackOverflow线程中的答案中收集，我们得到：

这将获取定义了id的所有元素，请注意，如果您有一个扩展表，这可能会有点慢。或者，您可以选择，然后应用过滤器缩小设置范围：

$('td').filter(function(){
    return $(this).attr('id') !== undefined;
});

两者基本上是一样的

2.将tooltipster应用于这些元素我在这里做的不多，因为您有很多注释掉的代码，所以我保持原样，只做了一些小的调整，下面是我的工作代码版本：

$('td[id]').tooltipster({
    // content: 'Loading...',
   functionBefore: function(origin, continueTooltip) {
        // We'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
        continueTooltip();

        // Next, we want to check if our data has already been cached
        //if (origin.data('ajax') !== 'cached') {
            $.ajax({
                type: 'GET',
                url: 'getDetails.php',
                data: $(this).attr('id'),
                success: function(data) {
                    // Update our tooltip content with our returned data and cache it
                    //alert("Data is : "+data);
                    var finalData = 'Total Data : 300 <br> Total Completed : 200';

                    //alert("DATA");
                    //origin.tooltipster: $('<span>testst<strong>This text is in bold case !</strong></span>')

                   origin.tooltipster({
                        content: finalData,
                        multiple: true,
                        contentAsHTML: true
                    });

                    //origin.tooltipster({content: data,contentAsHTML: true}).data('ajax', 'cached');
                }
            });
        //}
    }
});

3.让tooltipster从这里处理一切当鼠标悬停在某个元素上时，默认情况下会触发初始化时的Tooltipster，这意味着您的functionBefore将在此悬停事件之前运行，导致您的AJAX请求每次都运行，此后无需再执行任何操作：D

我希望这有帮助！：

这将获取定义了id的所有元素，请注意，如果您有一个扩展表，这可能会有点慢。或者，您可以选择，然后应用过滤器缩小设置范围：

$('td').filter(function(){
    return $(this).attr('id') !== undefined;
});

两者基本上是一样的

2.将tooltipster应用于这些元素我在这里做的不多，因为您有很多注释掉的代码，所以我保持原样，只做了一些小的调整，下面是我的工作代码版本：

$('td[id]').tooltipster({
    // content: 'Loading...',
   functionBefore: function(origin, continueTooltip) {
        // We'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
        continueTooltip();

        // Next, we want to check if our data has already been cached
        //if (origin.data('ajax') !== 'cached') {
            $.ajax({
                type: 'GET',
                url: 'getDetails.php',
                data: $(this).attr('id'),
                success: function(data) {
                    // Update our tooltip content with our returned data and cache it
                    //alert("Data is : "+data);
                    var finalData = 'Total Data : 300 <br> Total Completed : 200';

                    //alert("DATA");
                    //origin.tooltipster: $('<span>testst<strong>This text is in bold case !</strong></span>')

                   origin.tooltipster({
                        content: finalData,
                        multiple: true,
                        contentAsHTML: true
                    });

                    //origin.tooltipster({content: data,contentAsHTML: true}).data('ajax', 'cached');
                }
            });
        //}
    }
});

我希望这有帮助！：

您可以使用以下代码：

var tooltipInstance;
$("body").on('mouseover', 'td[id]:not(.tooltipstered)', function(){
    tooltipInstance = $(this).tooltipster({
        //your code ...
    });
    tooltipInstance.tooltipster('open');
});

您可以使用以下代码：

var tooltipInstance;
$("body").on('mouseover', 'td[id]:not(.tooltipstered)', function(){
    tooltipInstance = $(this).tooltipster({
        //your code ...
    });
    tooltipInstance.tooltipster('open');
});

我需要一些澄清如何在所有这些之前初始化。？我该怎么办？在何处调用此$'td'.filterfunction{return$this.attr'id'！==undefined；}@user2711681将上面的代码放在文档就绪块中，例如$document.readyfunction{/**代码放在这里**/}；是的，我已经完成了$'td'.filterfunction{return$this.attr'id'！==undefined；}；以及如何捕获要设置到idval变量中的id？我仍然看到它在需要两三次的地方落后了。我用最新的代码更新了我的问题。@user2711681这只是$'td[id]的一个替代品，如果您对此满意，就不需要使用它。你可以使用$this.attr'id设置你的idval，我已经更新了我的答案来反映这一点：好的，很好，但我仍然需要至少2次鼠标移动，然后只显示工具提示。但是从调试日志中，我可以看到我的ajax页面在鼠标悬停时被调用。有什么解决办法吗？我需要一些澄清，在这之前如何初始化。？我该怎么办？在何处调用此$'td'.filterfunction{return$this.attr'id'！==undefined；}@user2711681将上面的代码放在文档就绪块中，例如$document.readyfunction{/**代码放在这里**/}；是的，我已经完成了$'td'.filterfunction{return$this.attr'id'！==undefined；}；以及如何捕获要设置到idval v中的id

可变的？我仍然看到它在需要两三次的地方落后了。我用最新的代码更新了我的问题。@user2711681这只是$'td[id]的一个替代品，如果您对此满意，就不需要使用它。你可以使用$this.attr'id设置你的idval，我已经更新了我的答案来反映这一点：好的，很好，但我仍然需要至少2次鼠标移动，然后只显示工具提示。但是从调试日志中，我可以看到我的ajax页面在鼠标悬停时被调用。有什么解决办法吗？