很抱歉,如果这是在其他地方或显而易见的。我搜索后没有看到它,而且我对网络开发非常陌生,所以我可能有点在这儿绕圈子。
详细信息:
我正在使用智能表扩展 ( http://lorenzofox3.github.io/smart-table-website/ ) 在我正在构建的 Tomcat Web 应用程序上显示数据。一切都运行良好,但我遇到了一些工具提示功能的问题。我已经编写了代码,以便 x/y 坐标将跟随鼠标,并且如果图标没有悬停在其上,它将离开屏幕,因此不会干扰任何内容。为了实现这一点,我有一个带有 span 元素的 div,其中包含我需要的文本。例如,
<td st-ratio="60">
<div class="smartToolTip">
Here<span class="smartToolTipText">{{row.hover}}</span>
</div>
</td>
问题:
这在智能表中运行良好,直到我更改页面。之后,如果我将鼠标悬停在将显示工具提示跨度的任何位置,它就会将其显示出来。不再使用鼠标坐标来更新位置。我可以没有这种跟随鼠标的功能,但这显然是一个问题,因为在一个大的工具提示中,跨度占用了大量的屏幕空间(看看它如何妨碍下面我的 Plunker 中的分页 div)。
在我看来,切换页面后,tooltip.js 中的所有内容都会失败。这段代码有什么我不知道的吗?
$(document).ready(function() {
$('.smartToolTip').hover(function(){
}, function() {
// Hover out code
$('.smartToolTipText').css({ top: -3000})
}).mousemove(function(e) {
var mousex = e.pageX - 30;
var mousey = e.pageY + 8;
if (mousex<0) {
mousex = 2;
}
$('.smartToolTipText')
.css({ top: mousey, left: mousex })
});
});
骗子: https://plnkr.co/edit/0Eakvt5Cb3hjyZF2t7ad
注意:我确实注意到这个 Plunker 由于某种原因无法在 Firefox 中运行。我的网络应用程序可以,所以不用担心修复这个问题。如果您使用的是 Firefox,并且想要访问该链接,请切换到其他浏览器。
感谢任何和所有建议/答案,如果有任何我可以澄清的地方,请告诉我。在这里第一次发帖,试图遵循礼仪,但可能遗漏了一些东西。提前致谢。
编辑: 解决方案:
这里的每条评论:
Changing pages in smart-table stops JQuery functions from working?
遵循建议将函数绑定(bind)到 mouseout
和 mousemove
事件,而不是文档就绪。这就是我所需要的一切。
最佳答案
这里的每条评论:
Changing pages in smart-table stops JQuery functions from working?
遵循建议将函数绑定(bind)到 mouseout
和 mousemove
事件,而不是文档就绪。这就是我所需要的一切。
关于javascript - 更改智能表中的页面会阻止 JQuery 函数工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37260475/