Mouseleave事件未触发

Question

我有一个导航菜单。当用户离开li时，我希望菜单在关闭之前等待一段很短的时间。以前我做的代码申请工作正常，直到我想给出不同的延迟。 问题是事件未触发。

我尝试在jsfiddle上制作该项目的版本，该版本工作正常 - https://jsfiddle.net/cv6t7yqw/

我的代码：

$("#nextLeftNav li, #prevLeftNav li").on("mouseleave", function (event) {
            var element = $(event.currentTarget);
            element.removeClass("hover");
            var delayMs = 600;
            if($(this).is("#nextLeftNav li"))
            {
            	delayMs = 3000;
            }
            timeOutMethod = setTimeout(timeoutNavbar, delayMs, element);     
});

function timeoutNavbar(){
    console.log("timeOutNavBar")
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div id="prevLeftNav">
  <li>
    <span class="chevron top">
    </span>
  </li>
</div>

当我检查prevLeftNav唯一的li时，我看到大约200x20的尺寸，并且可以实际看到li。