在 bxcarousel 中的图像上重新绑定 jQuery qtip 工具提示

Question

我正在使用 bxcarousel 来显示一堆图像。每个图像都有一个工具提示，我使用 qtip 显示它。

这对于第一轮效果很好，但是当图像第二次出现时，工具提示不再显示（因为 bxcarousel 删除了滑出的元素并将其放回末尾）

可以在此处找到轮播的示例: http://www.kipdola.be/carousel/carousel.html

这是用于绑定事件的代码（也许它需要某个地方的“实时”函数？）

// Create the tooltips only on document load
$(document).ready(function() 
{
   // Use the each() method to gain access to each elements attributes
   $('#shopcarousel a[rel]').each(function()
   {
      $(this).qtip(

Answer 1

我最终出于类似的目的修改了 bxCarousel。以下是我的步骤：

1.) 将另一个属性（animation_cb 或回调）添加到默认对象。该属性应用于传递一个回调函数，在每个动画周期的尾部执行：

var defaults = {
    ...
    controls: true,
    animation_cb: null
};

2.）向slide_next和slide_prev函数添加对该选项的检查：

function slide_next(){
    ...
    get_a();
    if (typeof options.animation_cb === "function") options.animation_cb();
    is_working = false;
    ...
}

并且：

function slide_prev(){
    ...
    get_p()
    if (typeof options.animation_cb === "function") options.animation_cb();
    is_working = false;
    ...
}

3.）最后，在您的插件初始化中调用时，传递一个要执行的回调函数。例如：

function doBar () {
    // whatever you need to happen after the slides have moved
    // like rebinding events, or what have you
}

$('ul.foo').bxCarousel({
    ...
    animation_cb: doBar
});

Answer 2

qTip 不能很好地处理 .live() 事件...我尝试了这样的方法：

$('#shopcarousel a[rel]').live('mouseover', function(){... })

但效果不佳，因为有时您必须离开该元素然后再返回要显示的工具提示。

更好的选择是使用与 .live() 事件绑定的工具提示。我找不到很多，而且它们仍然相对基本：

1. 简单工具提示（制作您自己的教程）
2. Tipsy (我不确定这是否设置为使用 Ajax 加载内容）
3. monnaTip （来自此SO答案）