使用jQuery load（）时无法使工具提示工作（）content

Question

我在使用jQuery load（）函数时让我的工具提示工作时出现问题。如果我不使用load（）来加载外部动态数据，工具提示工作正常。

我GOOGLE了一下，发现我可能需要使用live（），但我无法弄清楚如何让它工作。任何建议？

谢谢！

这里是我的脚本：

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

这里是我的ajaxLoadDATA.cfm：它返回一个列表unorder

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

Answer 1

在回调函数中，你需要运行对新的工具提示代码项目，如下：

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

单边提示，如果你改变这一行：

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

为了这样的事情：

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

你提示一代人将多更快，因为jQuery的如何缓存文档片段进行再利用。

Answer 2

我使用修改后的版本this tooltip。此版本使用.live，因此加载的内容将自动具有工具提示功能。所有你需要做的是：

1. 添加这个脚本到你的主页（将其作为外部文件尤佳）
2. 你需要确保那些需要提示的元素有class="tipthis"，而且工具提示内容在标题属性内。此外，工具提示可以包含HTML（例如<h1>Tooltip</h1>Hello,<br>World）。

3. 您还需要一些基本的CSS：

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

这里是脚本（使用活，它需要的jQuery版本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(); }); 

下面是一些示例HTML：

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