Jquery Vtip 插件处理动态创建的数据

Question

我正在使用 Vtip 插件在悬停时在工具提示中显示标题值。除了当我尝试使用插件在动态创建的数据上显示工具栏时，一切都工作正常。我通常使用 live() 函数来解决这个问题。我怎样才能在他们的代码中实现 live() 函数？？？

  this.vtip=function(){this.xOffset=-10;this.yOffset=10;$(".vtip").unbind().hover(function(a{this.t=this.title;this.title="";
    this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("body").append('<p id="vtip"><img id="vtipArrow" />'+this.t+"</p>");
    $("p#vtip #vtipArrow").attr("src","images/vtip_arrow.png");
    $("p#vtip").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;
    $("p#vtip").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);
    $("p#vtip").css("top",this.top+"px").css("left",this.left+"px")})};
    jQuery(document).ready(function(a){vtip()});

Answer 1

我将 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

未经测试，但应该可以工作（需要 jQuery 1.4.x）：

this.vtip = function () {
  this.xOffset = -10;
  this.yOffset = 10;
  $('body').undelegate().delegate('.vTip', 'mouseenter mouseleave mousemove', function(e){
console.log(e.type)
    if(e.type==='mouseover'){

        this.t = this.title;
      this.title = "";
      this.top = (e.pageY + yOffset);
      this.left = (e.pageX + xOffset);
      $("body").append('<p id="vtip"><img id="vtipArrow" />' + this.t + "</p>");
      $("p#vtip #vtipArrow").attr("src", "images/vtip_arrow.png");
      $("p#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn("slow")
    }
    if(e.type==='mouseout'){
        this.title = this.t;
      $("p#vtip").fadeOut("slow").remove()
    }
    if(e.type==='mousemove'){
        this.top = (e.pageY + yOffset);
      this.left = (e.pageX + xOffset);
      $("p#vtip").css("top", this.top + "px").css("left", this.left + "px")
    }
  });
}();

编辑
好的，现在应该可以了！对此感到抱歉。