在 smart-table 中更改页面会使 JQuery 功能停止工作?
Changing pages in smart-table stops JQuery functions from working?
抱歉,如果这是在其他地方或显而易见的。搜索后我没有看到它,而且我对 Web 开发还很陌生,所以我可能会 运行 在这里绕圈子。
详情:
我正在使用 smart-table 扩展程序 (http://lorenzofox3.github.io/smart-table-website/) 在我正在构建的 Tomcat webapp 上显示数据。一切都 运行 很好,但是我 运行 遇到了一些工具提示功能的问题。我已经准备好代码,因此 x/y 坐标将跟随鼠标,如果图标没有悬停在其上,它将在屏幕外,因此不会干扰任何东西。为了完成这个,我有一个带有 span 元素的 div,其中包含我需要的文本。例如,
<td st-ratio="60">
<div class="smartToolTip">
Here<span class="smartToolTipText">{{row.hover}}</span>
</div>
</td>
问题:
这在 smart-table 中工作正常,直到我换页。在此之后,如果我将鼠标悬停在将显示工具提示范围的任何地方,它就会弹出。鼠标坐标不再用于更新位置。我可以在没有跟随鼠标的功能的情况下生活,但这显然是一个问题,因为在一个大的工具提示中,跨度占据了很多屏幕 space(看看它是如何妨碍分页的div 在我下面的 Plunker 中)。
在我看来,我的 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 中没有 运行。我的 webapp 可以,所以不用担心修复它。如果您使用的是 Firefox,如果您想遵循 link.
,请切换到其他浏览器
感谢所有advice/answers,如果有什么我可以澄清的,请告诉我。先post这里,尽量遵守礼仪,但可能漏掉了什么。提前致谢。
编辑:
解决方案:
此处每条评论:
按照建议将函数绑定到 mouseout
和 mousemove
事件,而不是准备好文档。这就是我需要的一切。
此处每条评论:
按照建议将函数绑定到 mouseout
和 mousemove
事件,而不是准备好文档。这就是我需要的一切。
抱歉,如果这是在其他地方或显而易见的。搜索后我没有看到它,而且我对 Web 开发还很陌生,所以我可能会 运行 在这里绕圈子。
详情:
我正在使用 smart-table 扩展程序 (http://lorenzofox3.github.io/smart-table-website/) 在我正在构建的 Tomcat webapp 上显示数据。一切都 运行 很好,但是我 运行 遇到了一些工具提示功能的问题。我已经准备好代码,因此 x/y 坐标将跟随鼠标,如果图标没有悬停在其上,它将在屏幕外,因此不会干扰任何东西。为了完成这个,我有一个带有 span 元素的 div,其中包含我需要的文本。例如,
<td st-ratio="60">
<div class="smartToolTip">
Here<span class="smartToolTipText">{{row.hover}}</span>
</div>
</td>
问题:
这在 smart-table 中工作正常,直到我换页。在此之后,如果我将鼠标悬停在将显示工具提示范围的任何地方,它就会弹出。鼠标坐标不再用于更新位置。我可以在没有跟随鼠标的功能的情况下生活,但这显然是一个问题,因为在一个大的工具提示中,跨度占据了很多屏幕 space(看看它是如何妨碍分页的div 在我下面的 Plunker 中)。
在我看来,我的 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 中没有 运行。我的 webapp 可以,所以不用担心修复它。如果您使用的是 Firefox,如果您想遵循 link.
,请切换到其他浏览器感谢所有advice/answers,如果有什么我可以澄清的,请告诉我。先post这里,尽量遵守礼仪,但可能漏掉了什么。提前致谢。
编辑: 解决方案:
此处每条评论:
按照建议将函数绑定到 mouseout
和 mousemove
事件,而不是准备好文档。这就是我需要的一切。
此处每条评论:
按照建议将函数绑定到 mouseout
和 mousemove
事件,而不是准备好文档。这就是我需要的一切。