Question

我是jQuery的新手，并试图结合使用工具提示插件和灯箱插件。更具体地说，我使用Colorbox和vtip。

Colorbox生成一个显示如下图像的div：

<div id="cboxLoadedContent" style="display: block; width: 400px; overflow: auto; height: 498px;">
<br>
<img src="image.jpg" id="cboxPhoto" style="margin: 49px auto auto; border: medium none; display: block; float: none; cursor: pointer;">
<br>
</div>
</code>

我接下来添加class="vtip" title="This is a tip."以使用vtip样式，但由于某些原因，当它是Colorbox动态生成的元素上的标题标记时它不起作用，但适用于页面上已加载的任何内容。

任何人都可以向我解释为什么会这样并且可能提供一些解决方案来解决这个问题吗？

Answer 1

如果您不想在每次向页面写入新元素时重新调用该函数，我都会向vtip写一个更新。我将vtip函数重写为jQuery插件，可以链接，允许自定义设置，并使用实时元素。它使用事件的映射，因此它将适用于jQuery 1.4.3及更高版本。

(function ($) {
$.fn.vtip = function (options) {

    var settings = {
        xOffset: -10,
        yOffset: 6,
        arrow: '/images/vtip_arrow.png'
    };
    if (options) $.extend(settings, options);

    return this.live({
        mouseenter: function (a) {
            this.t = this.title;
            this.title = "";
            this.top = (a.pageY + settings.yOffset);
            this.left = (a.pageX + settings.xOffset);
            $("body").append('<p id="vtip"><img id="vtipArrow" />' + this.t + "</p>");
            $("p#vtip #vtipArrow").attr("src", settings.arrow);
            $("p#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn("fast");
        },
        mouseleave: function (a) {
            this.title = this.t;
            $("p#vtip").fadeOut("fast").remove();
        },
        mousemove: function (a) {
            this.top = (a.pageY + settings.yOffset);
            this.left = (a.pageX + settings.xOffset);
            $("p#vtip").css("top", this.top + "px").css("left", this.left + "px");
        }
    });
};
})(jQuery);

// You can use it with any class, I'm using the class 'vtip' below.
$(document).ready(function(){
    $('.vtip').vtip();
});

// If necessary, add custom settings like so:
$('.vtip').vtip({xOffset:-10,yOffset:10,arrow:'/images/customArrow.png'});

Answer 2

我在这个页面上尝试了代码/重写插件并遇到了一些复杂问题......也许这对某些人来说效果会更好并节省你一些时间：

(function ($) {
    $.fn.vtip = function (options) {

    var settings = {
        xOffset: -10,
        yOffset: 20,
        arrow: 'http://simages0.showtimesfast.com/icons2/vtip_arrow.png'
    };
    if (options) $.extend(settings, options);

    return this.live('mouseover mouseout mousemove', function(a){

        if(a.type == 'mouseover'){

            this.top = (a.pageY + settings.yOffset);
            this.left = (a.pageX + settings.xOffset);
            $("body").append('<p id="vtip"><img id="vtipArrow" />' + this.title + "</p>");
            $("p#vtip #vtipArrow").attr("src", settings.arrow);
            $("p#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn("fast");

        }else if (a.type == 'mouseout'){

            $("p#vtip").fadeOut("fast").remove();

        }else if (a.type == 'mousemove'){

            this.top = (a.pageY + settings.yOffset);
            this.left = (a.pageX + settings.xOffset);
            $("p#vtip").css("top", this.top + "px").css("left", this.left + "px");

        }

    });
};
})(jQuery);

目前正在http://www.showtimes.ca/上使用，以便您看到它在运作中。感谢上面的Steve，因为你带领我朝着正确的方向开展现场活动。

Answer 3

线索位于vtip文件的底部：

jQuery(document).ready(function($){vtip();})

正在准备文件中调用vtip。它不知道你还没有添加的元素。添加元素后，需要调用vtip函数。

vtip();

PS vtip并没有被编写为插件，否则您可以将其与其他代码链接在一起，例如

$('div').append('<a>example</a>').vtip(); //currently this wont work

您可能希望与作者联系并建议更改，或者找到其他工具提示 - 周围有很多。

如何在动态生成的元素上加载vtip工具提示？

3 个答案: