Функциональность всплывающей подсказки Javascript для вставленного текста

Question

Я использовал этот simple tooltip library, состоящий из десяти строк jQuery. Примеры работают отлично, как показано в этом fiddle.

Проблема возникает, когда я пытаюсь вставить новый текст, который я все еще хочу включить всплывающую подсказку.

<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>") 
    }); 

Текст сам по себе активирует всплывающую подсказку, но при добавлении после загрузки тела функциональность отсутствует. Я пробовал это для нескольких тегов, но все с одинаковым результатом. Любой совет?

Answer 1

Проблема в том, что $('.masterTooltip').hover(...).mousemove(...) прикрепляет обработчики событий только к тем элементам, которые существуют в то время.

Вы можете применить те же .hover().mousemove() код в вашем click обработчика, но я думаю, что это проще использовать вместо the delegated syntax for the .on() method для присоединенных делегированных обработчиков событий к document, передавая селектор '.masterTooltip' в качестве аргумента, например, что, когда происходит событие, JQuery будет автоматически проверяет, применяется ли событие к элементу, соответствующему этому селектору. Основной синтаксис будет:

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

... но учитывая вы хотите три обработчика событий, mouseenter, mouseleave и mousemove обратиться к тем же элементам вы можете pass an object to .on() следующим образом:

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

EDIT, PS Обратите внимание, что используемый вами метод .hover() - это удобный способ добавления обработчиков и mouseleave, но при использовании .on() вы должны явно определить mouseenter и mouseleave, как я показал.