用于插入文本的 Javascript 工具提示功能

Question

我一直在使用这个简单的工具提示库，由大约十行jQuery组成。这些示例工作正常，如本小提琴所示。

当我尝试插入仍希望激活工具提示的新文本时，出现问题。

 <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(...)仅将事件处理程序附加到当时存在的元素。

您可以在click处理程序中应用相同的.hover().mousemove()代码，但我认为使用.on()方法的委托语法将委托的事件处理程序附加到document更容易，将'.masterTooltip'选择器作为参数传递，以便在事件发生时jQuery将自动测试事件是否应用于与该选择器匹配的元素。基本语法为：

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

。但是，如果您希望将三个事件处理程序(mouseenter、mouseleave 和 mousemove 应用于相同的元素，则可以将对象传递给.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/

编辑，附言请注意，您最初使用的.hover()方法是添加mouseenter和mouseleave处理程序的便捷方法，但是在使用.on()时，您必须显式定义mouseenter和mouseleave，如我所示。