我一直在用这个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>")
});
文本本身会激活工具提示,但在主体加载后附加时,没有任何功能。我已经对几个标签进行了尝试,但结果都相同。有什么建议吗?
最佳答案
问题是 $('.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
,如我所示。
关于用于插入文本的 Javascript 工具提示功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42103439/