jquery - jqueryツールチップ+ライブ

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関数を使用できます。これにより、すべての要素がロードされた後に関数が実行されます。すなわち。

$(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。