Question

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

我用谷歌搜索，发现我可能需要使用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：它返回一个无序列表

<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，因此加载的内容将自动具有工具提示功能。您所需要做的就是：

将此脚本添加到主页面（将其添加为外部文件）
您需要确保需要工具提示的元素具有class="tipthis"，并且工具提示内容在title属性中。此外，工具提示可以包含HTML（例如<h1>Tooltip</h1>Hello,<br>World）。

您还需要一些基本的CSS：

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

这是脚本（使用live，它需要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>

使用jQuery load（）内容时无法获得工具提示

2 个答案: