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

您可以在您的 click 处理程序中应用相同的 .hover().mousemove() 代码，但我认为使用 the delegated syntax for the .on() method 来附加委托(delegate)事件更容易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/

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