jquery - jquery 工具提示+live

Question

我有这个代码

$(".tooltip").each(function(){
        var tooltip = this.title;
        this.title = "";
        $(this).live("mousemove",function(e){
             $("#tooltip").html(tooltip).show();
        }).live("mouseout",function(){
            $("#tooltip").hide().empty();
        });
    });

它工作得很好，但是通过 ajax 动态加载的元素呢？谢谢

Answer 1

它是否需要在 .each() 中？这会起作用吗：

$(document).on({
    mouseover: function() {
        $('#tooltip').html(tooltip).show();
    },
    mouseout: function() {
        $('#tooltip').hide();
    }
}, '.tooltip');

添加了一个jsFiddle 示例

Answer 2

您可以使用 document.ready 函数，这将在加载所有元素后运行您的函数。IE 。

$(document).ready(function() {
   $(".tooltip").each(function(){
        var tooltip = this.title;
        this.title = "";
        $(this).live("mousemove",function(e){
             $("#tooltip").html(tooltip).show();
        }).live("mouseout",function(){
            $("#tooltip").hide().empty();
        });
    });
 });

Answer 3

您应该使用on确保将事件传输到稍后添加的元素：

$(document).on('mousemove', ".tooltip", function(e){
     this.title = "";
     $("#tooltip").html(this.tooltip).show();
}).on('mouseout', ".tooltip", function(e){
     this.title = "";
     $("#tooltip").html(this.tooltip).hide();
});

这将适用于所有.tooltip元素。不需要你的each.