6

特定のオブジェクトのツールチップを作成する関数があります。現在、新しいツールチップオブジェクトを作成して追加するために、ajax挿入後にツールチップ関数を実行しています。手動で実行するのではなく、.on（）を使用して、挿入時にツールチップ関数を自動実行する方法があるかどうか知りたいです。

例えば：

 $('[title]').on('inserted', function(){
     tooltip(this);
 });

私はいくつかの読書をしました、そしてそれはカスタムトリガーが行く方法であるかもしれないように見えます、しかしそれがこのようなものが存在するならば私は大好きです:)

4

2 に答える 2

1

リクエストごとの疑似コードは次のとおりです。

$(document).ready(function() {
    $('body').on('added','*',function() {
        console.log($(this),'has been added');
    });
    $('body').append('<div>This is the first div</div>');
});

(function($) {
    fncs = {
        append:$.fn.append,
        appendTo:$.fn.appendTo
        // etc.
    }
    // we're assigning the original functions in this
    // object to be executed (applied) later
    $.fn.append = function() {
        fncs.append.apply(this,arguments);
        $(this).children().last().trigger('added');
        return $(this);
    }
    $.fn.appendTo = function() {
        fncs.appendTo.apply(this,arguments);
        return $(this);
        // no need to trigger because this function calls the one
        // above for some reason, and it's taking care of the
        // triggering the right element(s I think)
    }
})(jQuery);
于 2012-05-23T00:13:15.000 に答える
0

これはあなたが探している応答ではありませんが、ツールチップを要素に直接添付することはしません。代わりに、マウスオーバー時にツールチップを表示したいものにクラスを使用.on()し、次の方法でイベント ハンドラーを使用します。

$('body').on('mouseover','.tooltip',function() {
    // show tooltip
    console.log($(this).data('tooltip'));
    return false;
}).on('mouseout','.tooltip',function() {
    // hide tooltip
    return false;
});

そのため、本体に (必ずしも直接の子としてではなく) 追加するものはすべて、このイベント ハンドラーをトリガーします。

おそらく、クラスとともに各要素にツールチップ データを割り当てる追加の関数を作成するだけです。

$.fn.extend({
    tooltip:function(text) {
        text = text || '';
        return $(this).each(function() {
            $(this).data('tooltip',text).addClass('tooltip');
        });
    }
});

$('#someID').tooltip("Click me!");
$('button').tooltip("I'm a button");
于 2012-05-22T01:40:01.100 に答える