我使用此处显示的工具提示脚本: http://www.htmldrive.net/items/show/681/jQuery-and-CSS3-Simple-Tooltip.html
这就是我使用的,只是做了一些改动:
$(document).ready(function() {
$("body").on("mouseover", ".tip_trigger", function(){
tip = $(this).find('.tip');
$(".tip").html('Loding...');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX; //Get X coodrinates
var mousey = e.pageY; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
var X = $('.tip_trigger').offset().left;
var Y = $('.tip_trigger').offset().top;
mousex = e.pageX - X+180;
mousey = e.pageY - Y+105;
tip.css({ top: mousey, left: mousex });
$(".tip").html('Loding...');
var idp= this.title;
$('.tip').load("/infopage.php", { id: idp});
});
});
带有提示的 html 是这样的:
<td style="padding-left:4px;"><a href="#" class="tip_trigger" title="40420549">text<span class="tip"></span></a> txtxtxtxt</td>
它工作得很好,但问题是,在我使用 ajax 加载一些 php 内容后,脚本无法处理来自那里的内容。
为什么会这样? 如果有其他方法可以将 php 内容加载到 tooltip 也很好:)
最佳答案
编辑:能够通过将您的 jQuery 分成三个元素来获得实时“开启”功能。 “ON mouseover”“ON mousemove”和“ON mouseout”——因为 on 函数不支持悬停的多个定义...还必须向每个函数添加一个提示变量声明才能使其工作:
var tip = $(this).find('.tip');
$(document).ready(function() {
$("body").on("mouseover", ".tip_trigger", function(){
var tip = $(this).find('.tip');
$(".tip").html('Loding...');
tip.show(); //Show tooltip
});
$("body").on("mouseout", ".tip_trigger", function(){
var tip = $(this).find('.tip');
tip.hide(); //Hide tooltip
});
$("body").on("mousemove", ".tip_trigger", function(e){
var tip = $(this).find('.tip');
var mousex = e.pageX; //Get X coodrinates
var mousey = e.pageY; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
var X = $('.tip_trigger').offset().left;
var Y = $('.tip_trigger').offset().top;
mousex = e.pageX - X+180;
mousey = e.pageY - Y+105;
tip.css({ top: mousey, left: mousex });
$(".tip").html('Loading...');
var idp= this.title;
$('.tip').load("infopage.php", { id: idp});
});
});
这个设置应该让你更进一步 - 但如果你的 PHP 没有被 ajax 调用,我就陷入困境 - 希望这有帮助
这里发生的问题是您的 ajax 调用生成的新内容,新内容尚未使用您的 jQuery 函数实例化:
$(".tip_trigger").hover(function(){ ...
要解决此问题,您需要将 jQuery .hover 触发器转换为 .on() 或 .live() 函数[取决于您的 jQuery 版本。live 是类似于 .on() 的旧弃用函数.如果你正在使用任何最新的 jQuery 版本,你应该先尝试 .on()]
像这样的东西会解决这个问题:
$("body").on("mouseover", ".tip_trigger", function(){ ...
这大致意味着:
在页面主体内 - 在所有元素“.tip_trigger”的悬停事件上 [无论它们是何时生成的,无论是使用 ajax 还是在文档就绪时] - 调用所述函数 ...
需要注意的重要一点是,使用“body”是一种糟糕的做法,您需要用调用此 jQuery 时文档中存在的最具体的元素替换该“body”选择器,并且还包含您使用 ajax 创建的“.tip_trigger”对象。你可以在这里越具体会提高性能。
关于php - 加载 ajax 内容后 jquery 工具提示不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16629351/