incapable d'obtenir infobulle de travailler lorsque le contenu charge usingjQuery ()

Question

Je suis problème d'avoir obtenu mon infobulle de travailler lorsque vous utilisez la fonction load () jQuery. L'infobulle fonctionne très bien si je ne me charge () pour charger des données dynamiques externes.

Je googlé et trouvé i peut-être besoin d'utiliser en direct (), mais je ne peux pas comprendre comment le faire fonctionner. Toute suggestion?

Thank you !!

Voici mes scripts:

function loadEMERContent(uid) {
    $("#ActionEWPNBook").load("ajaxLoadDATA.cfm?uid="+uid, null, showLoading);
    $("#EWPNBookloading").html('<img src="/masterIncludes/images/ajaxLoading.gif" alt="loading" align="center" />');
}

function showLoading() {
    $("#EWPNBookloading").html('');

}


function simple_tooltip(target_items, name){
 $(target_items).each(function(i){
        $("body").append("<div class='"+name+"' id='"+name+i+"'><p style='padding:5px;'>"+$(this).attr('title')+"</p></div>");
        var my_tooltip = $("#"+name+i);

        $(this).removeAttr("title").mouseover(function(){
                my_tooltip.css({opacity:0.8, display:"none"}).stop().fadeIn(400);
        }).mousemove(function(kmouse){
                my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
        }).mouseout(function(){
                my_tooltip.stop().fadeOut(400);               
        });
    });
}

Voici mon ajaxLoadDATA.cfm: elle retourne une liste de UNORDER

<li><span title="dynamic title here" class="tipthis">date</span></li>

Answer 1

Dans votre fonction de rappel, vous devez exécuter le code infobulle contre les nouveaux éléments, comme ceci:

function showLoading(data) { //data  = the response text, passed from `.load()`
  $("#EWPNBookloading").html('');
  var items = //get items here, something like $('.giveMeATooltip', data);
  var name = //set name, not sure what you're using for this
  simple_tooltip(items, name);    
}

Une pointe de côté, si vous changez cette ligne:

 $("body").append("<div class='"+name+"' id='"+name+i+"'><p style='padding:5px;'>"+$(this).attr('title')+"</p></div>");

Pour quelque chose comme ceci:

$("body").append(
    $("<div></div>", { 'class': name, 'id': name + i }).append(
        $("<p style='padding:5px;'></p>").text($(this).attr('title'))
    )
);

Votre génération d'info-bulle sera beaucoup plus rapide en raison de la façon dont jQuery peut mettre en cache des fragments de documents pour les réutiliser.

Answer 2

J'utilise une version modifiée de cette info-bulle . Cette version utilise le contenu .live donc chargé aura automatiquement la fonctionnalité infobulle. Tout ce que vous devez faire est:

1. Ajoutez ce script à votre page principale (l'ajouter en tant que fichier externe est perferred)
2. Vous devez vous assurer que les éléments qui ont besoin d'une info-bulle ont une class="tipthis" et que le contenu des infobulles sont dans l'attribut title. En outre, l'info-bulle peut contenir du code HTML (par exemple <h1>Tooltip</h1>Hello,<br>World).

3. Vous aurez également besoin de CSS de base:

   #tooltip { background: #f7f5d1; color: #333; padding: 5px; width: 300px; }
   

Voici le script (en utilisant en direct et nécessite la version 1.4 + jQuery)

/* Tooltip script */
this.tooltip = function(){
 // Defaults
 var tooltipSpeed = 300; // fadein speed in milliseconds
 var xOffset = 20; // Don't use negative values here
 var yOffset = 20;

 $('.tipthis').live('mouseover',function(e) {
  this.t = this.title;
  this.title = '';

  $('<div></div>', {
   id : 'tooltip',
   css: {
    display : 'none',
    position: 'absolute',
    zIndex  : 1000,
    top     : (e.pageY - xOffset) + 'px',
    left    : (e.pageX + yOffset) + 'px'
   }
  })
  .html( this.t )
  .appendTo('body');

  $('#tooltip').fadeIn(tooltipSpeed);
 })

 .live('mouseout',function(){
  this.title = this.t;
  $('#tooltip').remove();
 })

 .live('mousemove',function(e){
  $("#tooltip").css({
   top : (e.pageY - xOffset) + 'px',
   left: (e.pageX + yOffset) + 'px'
  });
 })
}
$(document).ready(function(){ tooltip(); });

Voici quelques exemple HTML:

<a href="#" class="tipthis" title="This is some tooltip content">Hover over me!</a>