Comment charger l'info-bulle vtip sur un élément généré dynamiquement?

Question

Je suis nouveau à jQuery et en essayant de combiner l'utilisation d'un plugin infobulle et un plugin lightbox. Plus précisément, j'utilise Colorbox et vtip.

Colorbox génère une div qui affiche une image comme ceci:

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

ajouter à côté class="vtip" title="This is a tip." afin d'utiliser le style Vtip, mais pour une raison quelconque, il ne fonctionne pas quand il est une balise de titre sur un élément généré dynamiquement par Colorbox, mais fonctionne sur tout ce qui est déjà chargé sur la page.

Quelqu'un peut-il me expliquer pourquoi cela et peut-être proposer des solutions pour résoudre ce problème?

Answer 1

L'indice est au bas du fichier Vtip:

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

Vtip est appelé dans le document prêt. Il ne sait pas sur les éléments que vous n'avez pas encore ajouté. Vous devez rappeler la fonction vtip après avoir ajouté vos éléments.

vtip(); 

PS Vtip hasnt été écrit comme un plug-in, sinon vous pouvez enchaîner avec votre autre code par exemple

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

Vous pouvez contacter l'auteur et de suggérer le changement, ou trouver une autre infobulle - Il y en a plein autour.

Answer 2

Si vous ne voulez pas avoir à nouveau appeler la fonction à chaque fois qu'un nouvel élément est écrit à la page, j'ai écrit une mise à jour Vtip. J'ai réécrit la fonction vtip comme un 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.

(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 3

J'ai essayé le code/plugin réécrite sur cette page et eu quelques complications ... peut-être cela fonctionnera mieux pour quelqu'un et vous faire gagner du temps:

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

Actuellement utilisé sur http://www.showtimes.ca/ pour vous de le voir travailler en action. Merci à Steve ci-dessus car vous m'avez conduit dans la bonne direction pour travailler avec des événements en direct.