Question

我使用此工具提示脚本在此处显示： 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内容加载到工具提示它也会很好：）

Answer 1

编辑：通过将jQuery分解为三个元素，能够获得实时的“on”功能。一个“ON mouseover”“ON mousemove”和“on mouseout” - 因为on函数不支持多个hover定义...还必须为每个函数添加一个tip变量声明，以便它可以工作：

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”对象。你可以在这里提高性能。

加载ajax内容后，jquery工具提示无法正常工作

1 个答案: