javascript - 更改智能表中的页面会阻止 JQuery 函数工作?

标签 javascript jquery html angularjs smart-table

很抱歉,如果这是在其他地方或显而易见的。我搜索后没有看到它,而且我对网络开发非常陌生,所以我可能有点在这儿绕圈子。

详细信息:

我正在使用智能表扩展 ( 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)到 mouseoutmousemove 事件,而不是文档就绪。这就是我所需要的一切。

最佳答案

这里的每条评论:

Changing pages in smart-table stops JQuery functions from working?

遵循建议将函数绑定(bind)到 mouseoutmousemove 事件,而不是文档就绪。这就是我所需要的一切。

关于javascript - 更改智能表中的页面会阻止 JQuery 函数工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37260475/

相关文章:

javascript - 如何在前面的 div 仍然可以滚动的情况下临时禁用背景 div 滚动?

html - 为什么我的页眉比预期的要高?

html - 如何在 CSS3 的导航栏上创建按钮链接?

javascript - 在Moment.js中做diff,今天等于今天和明天,返回-0。为什么?

javascript - 使用 Angular 7 在混合应用程序中加载 Angularjs 包

javascript - application.js中评论和等号评论的区别

javascript - 在 Node.js 中调整图像大小而无需纵横比

javascript - addClass/removeClass 单击以选择另一个 div 的数据属性

javascript - 如果输入为空,则使 div 显示特定消息

php - 我应该使用 session 还是使用我现在拥有的?