Events On element not being called, but I can confirm that they have been attached

Question

Sorry in advance that I don't have nice short code examples to display with this post. I'm running into a really weird problem in an app i'm developing. I wrote some custom scrollbar code, and in this one instance none of the event handlers I add to one of the scroll bar "handles" are getting called.

You can see the app here

To see the problem just search for "biology" in the top left, and select the first result. Wait for some results to load in the right pane. The scroll bar in the right pane for "new" shouldn't respond to mouse clicks. If you switch to the used tab it will.

Now before you think I messed up attaching the event to it, try this.

If you are using chrome or anything with an easy javascript console you can run

$('.bs-scroll_bar_handle').mousemove(function(){console.log('moved');});

Now every time you move your mouse over one of the scroll bars it should log "moved". It works on the used tab, in the search results, but not under new.

I've used Visual Event to confirm that the event handler is getting added to the element, and I can manually trigger it using Visual Event.

One other note. If I only create the New tab and not the used one, it will function correctly.

Even if you can't find the exact problem I would really appreciate suggestions for why this might be happening.

Thanks!

Answer 1

All your code looks good, you just need to add a z-index: 999; to the inline elements style on the scroll bar that is not working:

<div class="bs-scroll_bar_handle" style="visibility: visible; height: 310px; top: 0px; z-index: 999;"></div>