.hover()方法奇怪行为

Question

我试图为一个站点构建一个主菜单，所以当我悬停在菜单的li上时，将显示一个div，其中包含子菜单，其中可能包含1到3个横幅。

这是我在li上悬停时用来显示子菜单的代码(此代码只是测试是否捕捉到悬停事件)：

$('#navigation-menu>li').on('mouseenter', function (event) {
    console.log("HOVERED!");
}).on('mouseleave', function(){
    console.log("MOUSELEAVE!");
});

我还确定了将在div中显示的横幅(在我的脚本文件中，这段代码在悬停检查之前)。如果重要的话，我也使用Bootstrap )：

if(!$.trim($("#banner-3-img").html()).length) {
    if(!$.trim($("#banner-2-img").html()).length) {
        $("#banner-1").addClass("col-sm-12");
        $("#banner-2").css("display","none");
        $("#banner-3").css("display","none");
        console.log("1 BANNER");
        return;
    }
    console.log("2 BANNERS");
    $('#banner-1').addClass("col-sm-6");
    $('#banner-2').addClass("col-sm-6");
    $("#banner-3").css("display","none");

}else{
    console.log("3 BANNERS");
    $("#banner-1").addClass("col-sm-4");
    $("#banner-2").addClass("col-sm-4");
    $("#banner-3").addClass("col-sm-4");
}

这是带有这些横幅标记的html部件：

<div class="row-fluid">

    <div id="banner-1">
        <a href="#">
            <div id="banner-1-img">
                <img  src="img/mega-menu/banner-1.png" alt=""/>
            </div>
        </a>
    </div>

    <div id="banner-2">
        <a href="#">
            <div id="banner-2-img">
                <img  src="img/mega-menu/banner-3-2.png" alt=""/>
            </div>
        </a>
    </div>

    <div id="banner-3">
        <a href="#">
            <div id="banner-3-img">
                <img  src="img/mega-menu/banner-3-3.png" alt=""/>
            </div>
        </a>
    </div>

</div>

奇怪的是，当我将img元素从#banner-2-img和#banner-3-img中删除时，脚本发现我只有一个横幅(并设置了所需的类)，但是悬停的检查代码不起作用--在li上悬停时，不会在控制台中得到"HOVERED!"。当我显示2或3个横幅时，我确实收到了"HOVERED!"消息。

其他什么都没有改变--我只从#banner-2-img和#banner-3-img中删除了2个#banner-3-img元素。

这怎麽可能？

Answer 1

我不知道为什么它不能从单独的.js文件(指向脚本的链接位于html页面的底部，代码在$(document).ready()块中)工作，但是当我将悬停检查代码放在html页面的底部时，一切正常。

<script>
(function(){
    $('#navigation-menu>li').on('mouseenter', function () {
        console.log("HOVERED!");
    }).on('mouseleave', function(){
        console.log("MOUSELEAVE!");
    });
})();
</script>