Nathan Asselstine Nathan Asselstine - 4 months ago 13
jQuery Question

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

Sorry if this is elsewhere or obvious. I didn't see it after searching, and I'm very new to web development so I may kind of be running in circles on something here.

Details:

I'm using the smart-table extension (http://lorenzofox3.github.io/smart-table-website/) to display data on a Tomcat webapp I'm building. Everything is running great, but I'm running into a problem with some functions I have for tooltips. I've got the code in place so that the x/y coordinates will follow the mouse, and if an icon is not being hovered over, it will be off-screen so it doesn't interfere with anything. To accompliosh this, I've got a div with a span element, containing the text I need. e.g.,

<td st-ratio="60">
<div class="smartToolTip">
Here<span class="smartToolTipText">{{row.hover}}</span>
</div>
</td>


Problem:

This works fine in the smart-table, until I change pages. After this, if I hover over anywhere the tooltip span will be displayed, it brings it up. The mouse coordinates are no longer used to update the location. I could live without this functionality of following the mouse, but this is obviously a problem since in a large tooltip that span takes up a lot of screen space (see how it gets in the way of the pagination div in my Plunker below).

It seems to me that everything in my tooltip.js fails after switching pages. Is there something with this code I'm not aware of?

$(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 })
});

});


Plunker: https://plnkr.co/edit/0Eakvt5Cb3hjyZF2t7ad

Note: I did notice this Plunker doesn't run in Firefox for some reason. My webapp does, so don't worry about fixing that. If you're using Firefox, please switch to another browser if you'd like to follow that link.

Any and all advice/answers are appreciated, and please let me know if there is anything I can clarify. First post here, trying to follow etiquette, but may be missing something. Thanks in advance.

EDIT:
Solution:

Per comment here:

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

Followed advice to bind function to on
mouseout
and
mousemove
event, instead of document ready. This was everything I needed.

Answer

Per comment here:

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

Followed advice to bind function to on mouseout and mousemove event, instead of document ready. This was everything I needed.

Comments