JQuery - mit .on mit Element einfügen

Question

Ich habe eine Funktion, die einen Tooltip für bestimmte Objekte erstellt. Momentan verwende ich eine Tooltip-Funktion nach Ajax-Einfügungen, um die neuen Tooltip-Objekte zu erstellen und anzuhängen. Ich bin neugierig, ob es eine Möglichkeit gibt, .on() zu verwenden, um die Tooltip-Funktion beim Einfügen automatisch auszuführen, anstatt sie manuell auszuführen.

Zum Beispiel:

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

ich etwas zu lesen haben und es sieht aus wie benutzerdefinierte Trigger könnte der Weg zu gehen, aber ich würde gerne, wenn es so etwas wie dieses :) existierte

Answer 1

Hier ist die Pseudo Code wie pro Antrag.

$(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); 

Answer 2

Dies ist nicht die Antwort, die Sie suchen, aber ich würde Tooltips nicht direkt an Elemente anhängen. Stattdessen würde ich eine Klasse für diejenigen, verwende ich die Tooltip mit der Maus darüber zeigen wollen, und verwenden Sie die .on() Event-Handler in der folgenden Art und Weise:

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

So dass alles, was man an den Körper (nicht unbedingt als direkte Kind hinzufügen) löst diesen Event-Handler aus.

Ich würde wahrscheinlich nur eine zusätzliche Funktion erstellen, um die Tooltip-Daten jedem Element zusammen mit der Klasse zuzuordnen.

$.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");