JQuery Hover事件没有向UL开火

Question

我已经浏览了很多具有类似标题的问题，而我一生都无法弄清楚发生了什么。我有一个使用QuintOutJS jQuery的系统，该系统将填充列表并在悬停列表中添加一类，该列表将其在另一个功能中的地图上突出显示。

这是我的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>

很简单。现在，我试图通过jQuery在.locationList上调用悬停事件：

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

，但我什么都不能开火。奇怪的是，如果我删除了.locationList元素，并将该类添加到顶级<ul>中，则它可以毫无问题地工作。我想知道这是否是CSS问题，但我也不能把它钉住。没有欢乐地将其移至顶部Z索引。想法？非常感谢任何帮助或见识。谢谢！

Answer 1

多亏了特里的评论，就知道了。悬停事件侦听器试图在DOM中可用之前绑定到该元素。在

下移动悬停功能

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

做到了。