为什么这个jQuery插件（Tooltipster）的Ajax内容仅在鼠标hover2次后显示？

我无法找到此插件的解决方案，因为我无法通过Ajax找到任何有关外部内容的工作演示或文档。

基本上我有一个简单的div用鼠标hoverJSfunction：

 
Hover Me 

这是我的JSfunction：

 function myFunct(element, id){ $(element).tooltipster({ contentCloning: true, interactive:true, maxWidth:250, contentAsHTML:true, content: 'Loading...', // 'instance' is basically the tooltip. More details in the "Object-oriented Tooltipster" section. functionBefore: function(instance, helper) { var $origin = $(helper.origin); // we set a variable so the data is only loaded once via Ajax, not every time the tooltip opens if ($origin.data('loaded') !== true) { $.ajax({ type: "POST", url: baseUrl+"/requests/load_profilecard.php", data: 'id='+id+"&token_id="+token_id, cache: false, success: function(html) { // call the 'content' method to update the content of our tooltip with the returned data instance.content(html); // to remember that the data has been loaded $origin.html('loaded', true); } }); } } }); } 

为什么工具提示仅在第二次鼠标hover时显示？

这是一个类似的例子。 的jsfiddle

UPDATE

感谢支持，这解决了我的问题：

 
Hover me!
  $(document).ready(function() { $('.tooltip').tooltipster({ content: 'Loading...', functionBefore: function(instance, helper){ var $origin = $(helper.origin); $.ajax({ type: "POST", url: baseUrl+"/requests/load_profilecard.php", data: 'id='+ $origin.attr('data-id')+"&token_id="+token_id, cache: false, success: function(html) { // call the 'content' method to update the content of our tooltip with the returned data instance.content(html); } }); }, interactive:true, contentAsHTML:true, maxWidth:250 }); });  

无论如何这不适用于Ajax动态内容，我不知道为什么（我试图将它插入Ajax页面，没办法）

Answer 1

我建议一些事项：首先，将您的JS与HTML分开（这被认为是最佳实践），其次，在页面加载时初始化Tooltipster，最后，删除包装函数。 初始化工具提示后，默认情况下，您的代码将在hover时触发。

将JS与HTML分开

 
Hover Me 

在文档就绪上初始化Tooltipster

 $(document).ready(function() { $('.tooltip').tooltipster(); }); 

带hover的触发工具提示器

 $('.hover-me').tooltipster({ // all of your code from above functionBefore: function(){ var commentId = $(this).attr('data-commentId'); } }); 

注意：

Tooltipster的默认触发器是hover （如文档中所示），但是，您可以通过传入trigger: hover来显式设置它，这将使您的代码稍微更具可读性并且可维护。

Tooltipster支持建议书（见评论中 ）

我添加这个是因为它强化了我上面的解决方案，并为未来的开发人员添加了上下文……那些在评论部分可能会被忽略。

当鼠标hover事件已被触发时，您初始化工具提示，因此Tooltipster无法“听到”第一个事件并打开工具提示。 您最好在页面加载时初始化工具提示，并将您的注释ID放在您在准备ajax调用时在functionBefore中检索的data-id属性中。