incapaz de conseguir información sobre herramientas para el trabajo cuando la carga usingjQuery () contenido

Question

Estoy teniendo problemas para conseguir mi información sobre herramientas para el trabajo cuando se utiliza la carga jQuery () función. La descripción funciona bien si yo no uso la carga () para cargar los datos dinámicos externos.

Google y encontró la i puede necesitar usar en vivo (), pero no puedo encontrar la manera de conseguir que funcione. Cualquier sugerencia?

gracias !!

Aquí está mi script:

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

Aquí está mi ajaxLoadDATA.cfm: devuelve una lista de unorder

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

Answer 1

En su función de devolución de llamada, que necesita para ejecutar el código de información de herramienta en contra de los nuevos elementos, como esto:

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

Un consejo lado, si cambia esta línea:

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

Para algo como esto:

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

Su generación de información de herramienta será más más rápido debido a la forma en jQuery puede almacenar en caché los fragmentos de documentos para su reutilización.

Answer 2

Yo uso una versión modificada del esta información de herramientas . Esta versión utiliza .live contenido tan cargado automáticamente tendrá funcionalidad descripción. Todo lo que necesita hacer es:

1. Añadir este script a su página principal (añadiéndolo como un archivo externo se perferred)
2. Usted necesita asegurarse de que los elementos que necesitan una información sobre herramientas tienen un class="tipthis" y que el contenido de información sobre herramientas están dentro del atributo de título. Además, la descripción puede contener HTML (por ejemplo <h1>Tooltip</h1>Hello,<br>World).

3. También se necesita un poco de CSS básico:

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

Aquí está la secuencia de comandos (usando en vivo y requiere jQuery versión 1.4 +)

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

A continuación se muestra algo de HTML:

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