Question

我对javascript，jQuery或它的插件不是很有经验但通常我管理。无论如何，我的客户正在建立一个网站，其目的之一是从不同的网站上获取新闻文章，并在无序的HTML列表中显示标题。我没有访问他的代码，新闻文章加载速度相当慢（很多网站加载后）。

我正在使用qTIP，其想法是，一旦将鼠标悬停在新闻标题上，它就会生成一个工具提示。这在我的开发环境中工作正常，因为我的虚拟标题不是从任何地方生成的。

问题是，一旦客户端在其测试环境中设置了站点，将新闻标题加载到列表中的脚本就会很慢，以至于qTIP脚本在列表中有任何元素之前加载。因此，它不知道任何<li>来从中获取和生成工具提示。

是否有办法确保在工具提示脚本之前加载所有新闻文章负载？我认为加载脚本的一个简单延迟并不是很聪明，因为有些标题的加载时间比其他标题要长，所以延迟时间必须相当长。

Answer 1

查看我底部的更新

我也一直在研究这个问题，并提出了类似于@Gaby提供的解决方案。 @Gaby解决方案的问题是，在鼠标悬停事件发生之前，它不会创建qTip。这意味着您第一次鼠标悬停时不会看到qTip，但第二次会看到。此外，它会在每次鼠标悬停时重新创建qTip，这不是最佳选择。

我采用的解决方案是：

$("li").live('mouseover', function() {
    var target = $(this);
    if (target.data('qtip')) { return false; }
    target.qtip(...);
    target.trigger('mouseover');
});

以下是它的作用：

将目标设置为li元素
返回该li元素是否已有qtip
如果li上没有qtip，则对其应用qtip
再次发送鼠标悬停触发器以激活qtip

我知道这有点hacky，但似乎有效。另请注意2.0 version of qTip should support live()作为选项。据我所知，current 2.0 development branch尚不支持它。

<强>更新

这是正确的方法，直接来自qtip开发人员自己在论坛上：

$('selector').live('mouseover', function() {
   $(this).qtip({
      overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed
      content: 'I\'m a live qTip', // comma was missing here
      show: {
         ready: true // Needed to make it show on first mouseover event
      }
   });
})

因此，首先要确保每次鼠标悬停都不会使用“overwrite：false”重新创建新的qtips。然后它使用“show：{ready：true}”在第一次鼠标悬停时显示qtip。

Answer 2

您应该使用jQuery框架的直播活动。

将处理程序绑定到所有当前和未来匹配元素的事件（如单击）。也可以绑定自定义事件。

所以例如你可以做类似

的事情

$("li").live( 'mouseover', function(){ 
                                     $(this).qTip(...); 
                                     });

参考：http://docs.jquery.com/Events/live

Answer 3

不是没有，但我刚刚在show:{ready:true}事件中添加了onmouseover。这使它在Chrome＆amp; FF。

Answer 4

是的，我想出了类似的东西。我认为有人在他们的论坛上发布了类似的一个。我将mouseover-event更改为mousemove，以便qtip在第一次鼠标悬停时激活。

$('li').live('mousemove', function() {
  if( !$(this).data('qtip') ) {
     $(this).qtip(...)

我也同意这是一个非常讨厌的解决方案，但我无法想出更好的解决方案。也许在填充li的回调函数中检查并应用qtip会更好，但我实际上无法访问该代码。

qTip问题 - 提示未显示，因为元素在脚本后加载

4 个答案: