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

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版本的qTip应支持live()作为选项.据我所知,目前的2.0开发分支尚不支持它.

更新:

这是实现这一目标的正确方法,直接来自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 框架的Live Events 。

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

例如你可以做类似的事情

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

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