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

我是jQuery新手，尝试结合使用工具提示插件和lightbox插件。更具体地说，我正在使用和

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=“这是一个技巧。”

以使用vtip样式，但由于某些原因，当它是由Colorbox动态生成的元素上的标题标记时，它不起作用，而是对页面上已加载的任何内容起作用

---

有人能给我解释一下为什么会这样，并可能提供一些解决方案来解决这个问题吗？

线索在vtip文件的底部：

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

正在文档就绪中调用vtip。它不知道您尚未添加的元素。添加元素后，需要调用vtip函数

vtip();

PS vtip尚未作为插件编写，否则您可以将其与其他代码链接在一起，例如

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

$（'div'）.append（'example'）.vtip（）//目前这是行不通的

---

您可能需要联系作者并提出更改建议，或者查找其他工具提示—这里有很多工具提示。

如果您不想在每次向页面写入新元素时都重新调用该函数，我为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'});

（函数（$）{
$.fn.vtip=功能（选项）{
变量设置={
xOffset:-10，
yOffset:6，
箭头：'/images/vtip_arrow.png'
};
如果（选项）$.extend（设置、选项）；
把这个还给我，现场直播({
鼠标指针：函数（a）{
this.t=this.title；
this.title=“”；
this.top=（a.pageY+settings.yOffset）；
this.left=（a.pageX+settings.xOffset）；
$（“body”）.append（'
我尝试了此页面上的代码/重新编写的插件，但遇到了一些复杂问题…也许这对某些人更有效，并为您节省一些时间：
(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);

（函数（$）{
$.fn.vtip=功能（选项）{
变量设置={
xOffset:-10，
yOffset:20，
箭头：'http://simages0.showtimesfast.com/icons2/vtip_arrow.png'
};
如果（选项）$.extend（设置、选项）；
返回this.live（'mouseover mouseout mousemove'，函数（a）{
如果（a.type=='mouseover'）{
this.top=（a.pageY+settings.yOffset）；
this.left=（a.pageX+settings.xOffset）；
$（“body”）.append（'

目前正在使用中，您可以看到它正在运行。感谢上面的Steve，因为您引导我朝着正确的方向处理实时事件。
感谢您的解释！这一切突然变得有意义了！