Jquery Vtip plugin fonctionne avec des données créées dynamiquement

Question

J'utilise le plugin Vtip pour afficher les valeurs de titre dans une info-bulle lorsque survolée. Tout fonctionne bien, sauf lorsque j'essaie d'utiliser le plugin pour afficher des toolips sur des données créées dynamiquement. Je contourne normalement cela en utilisant la fonction live(). Comment puis-je implémenter la fonction live() à leur code ???

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

Untested, mais devrait fonctionner (jQuery 1.4.x nécessaire):

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") 
    } 
    }); 
}(); 

EDIT Ok, devrait maintenant fonctionner! Désolé pour ça.

Answer 2

J'ai réécrit la fonction vtip en tant que plugin jQuery, pour être chaînable, pour permettre des réglages personnalisés, et pour travailler avec des éléments live. Son utilisation d'un mappage d'événements, de sorte qu'il fonctionnera avec jQuery 1.4.3 et plus. Prendre plaisir.

(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'});