Jquery Plugin, wie zu implementieren. Live oder .on, so dass es mit neuen Elementen funktioniert

Question

Ich habe eine HTML Seite, die jQuery verwendet und auch ein externes Plugin tooltipster haben.

Um das Plugin zu intialize Ich habe dies zu tun:

$(document).ready(function() { 
    $('.tooltip').tooltipster(); 
}); 

Die HTML ist sehr einfach man muss nur gesetzt den class zu "tootlip":

'<span class="tooltip" title="This is my spans tooltip message!">Some other text</span>' 

Das für statische große Werke Elemente in der DOM.

Das Problem kommt für neue Elemente hinzugefügt, nachdem das DOM erstellt wird. Dies ist vergleichbar mit jQuery bei Verwendung von .on() oder .live() für Elemente, die danach erstellt wurden.

Also, wenn ich habe:

$('#newelement').click(function(e) { 

        $('#elements').html('<span class="tooltip" title="This is my spans tooltip message!">New element</span>'); 

       }); 

keine Ahnung, wie diese Arbeit zu machen? Kann ich .on() so verwenden, dass es für statische und dynamische Elemente funktioniert?

Answer 1

Yep, für neu erstellte Elemente sind Sie besser verwenden:

$(document).on("click", "#newelement", function(e) { 

       $('#elements').html('<span class="tooltip" title="This is my spans tooltip message!">New element</span>'); 

      }); 

Answer 2

besten Lösungen werden alle erneut zu binden (oder wenn Sie ehrgeizig sind - nur neu erstellt) Tooltip Element direkt nach erschaffe sie. Zum Beispiel sollten Sie nach dem Abschluss eines Ajax alle Tooltips aktualisieren.

Answer 3

neue Funktion erstellen und diese Funktion in der

.on Ereignis nennen

//Here call the .on to  
$("#anotherElement").on('click', function(){ 
    $('.tooltip').tooltipster(); 
    newFunction(); 
}); 

//Call the function to show title 
function newFunction(){ 
    $('#newelement'). click(function(e){ 
      $('#elements').h tml('<span class="tooltip" title="This is my spans tooltip message!">New element</span>'); 
    }); 
}