jQuery Hover Events not Firing on UL?

Question

I have looked through the plethora of questions with similar titles and can't, for the life of me, figure out what's happening. I have a system using KnockoutJS + jQuery that will populate a list and add a class to a hovered list that will highlight it on a map in another function.

Here's my HTML:

<ul data-bind="foreach: markers" class="locationListMain">
    <ul class="locationList">
        <h3 class="resultTITLE">
          <span data-bind="text: title"></span>
        </h3>
        <p class="resultLATLONG">
          LAT
          <span data-bind="text: lat"></span>
          , LONG 
          <span data-bind="text: lng"></span>
        </p>
    </ul>
</ul>

Simple enough. Now I'm trying to call a hover event on .locationList like so via jQuery:

$('.locationList').hover(function(){
  console.log('hovering');
  $(this).addClass('active');
}, function() {
  console.log('not hovering!');
  $(this).addClass('active');
});

But I can't get anything to fire. The weird thing is, if I remove the .locationList element, and add that class to the top level <ul> , it works without a problem. I'm wondering if it's a CSS problem, but I can't nail that down either. Have moved it to top z index with no joy. Thoughts? Would greatly appreciate any help or insight. Thanks!

Answer 1

Thanks to Terry's comment, figured it out. The hover event listener was trying to bind to the element before it was available in the dom. Moving the hover function under

$(document).ready(function(){})

did the trick.