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/

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

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

1 个答案: