Javascript Tooltip-Funktionalität für eingefügten Text

Question

Ich habe diese simple tooltip library verwendet, bestehend aus etwa zehn Zeilen von jQuery. Die Beispiele funktionieren gut, wie in dieser fiddle gezeigt.

Das Problem tritt auf, wenn ich versuche, neuen Text einzufügen, für den ich immer noch den Tooltip aktivieren möchte.

<input type="button" value="add text" id="add" /> 

    $("#add").click(function(){ 
     $('body').append("<p title=\"Mouse over the heading above to view the tooltip.\" class=\"masterTooltip\">Mouse over the heading text above to view it's tooltip.</p>") 
    }); 

Der Text selbst aktiviert den Tooltip, aber wenn, nachdem der Körper Lasten angehängt, gibt es keine Funktionalität. Ich habe dies für mehrere Tags versucht, aber alle mit dem gleichen Ergebnis. Irgendein Rat?

Answer 1

Das Problem ist, dass $('.masterTooltip').hover(...).mousemove(...) Ereignishandler nur zu Elementen anfügt, die zu diesem Zeitpunkt vorhanden sind.

Sie könnten den gleichen .hover().mousemove() Code in Ihrem click Handler anwenden, aber ich denke, es ist einfacher, statt the delegated syntax for the .on() method auf dem beigefügten delegierte Event-Handler die document zu verwenden, vorbei an den '.masterTooltip' Selektor als Argument, so dass, wenn das Ereignis jQuery auftritt, Testen Sie automatisch, ob das Ereignis auf ein Element angewendet wurde, das mit diesem Selektor übereinstimmt. Die grundlegende Syntax wäre:

$(document).on('mouseenter', '.masterTooltip', function() { ... }) 

... aber Sie wollen drei Event-Handler gegeben, mouseenter, mouseleave und mousemove auf die gleichen Elemente anwenden Sie können pass an object to .on() wie folgt:

$(document).on({ 
    'mouseenter': function() { 
     // Hover over code 
     var title = $(this).attr('title'); 
     $(this).data('tipText', title).removeAttr('title'); 
     $('<p class="tooltip"></p>') 
     .text(title) 
     .appendTo('body') 
     .fadeIn('slow'); 
    }, 
    'mouseleave': function() { 
     // Hover out code 
     $(this).attr('title', $(this).data('tipText')); 
     $('.tooltip').remove(); 
    }, 
    'mousemove': function(e) { 
     var mousex = e.pageX + 20; //Get X coordinates 
     var mousey = e.pageY + 10; //Get Y coordinates 
     $('.tooltip') 
     .css({ 
      top: mousey, 
      left: mousex 
     }) 
    } 
    }, '.masterTooltip'); // NOTE the selector on this line 

https://jsfiddle.net/c7dw8e28/1/

BEARBEITEN, PS Beachten Sie, dass die von Ihnen ursprünglich verwendete .hover()-Methode eine bequeme Methode zum Hinzufügen von mouseenter und mouseleave Handlern ist, aber wenn Sie .on() verwenden, müssen Sie mouseenter und mouseleave explizit definieren, wie ich gezeigt habe.