Jquery工具提示在加载ajax内容后不工作 - jquery tooltip not working afer load ajax content

我使用如下所示的工具提示脚本: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>

这是伟大的工作，但问题是，我加载一些php内容与ajax的脚本不工作的内容来自那里。

为什么会这样?如果有另一种方式加载php内容到工具提示，这将是很好的:)

EDIT:可以通过将jQuery分解为三个元素来获得实时的"on"功能。一个"ON mouseover"、"ON mousemove"answers"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对象。