在加载css下拉子菜单时多次触发mouseover事件

Question

在我的应用程序中，我创建了一个下拉菜单，其中子菜单将来自服务器端 贝娄是html。

        <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-cog"></i></a>
                <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu">
                    <li class="dropdown-submenu dropdown-menu-right favProperties">
                        <a tabindex="-1" href="#" class="favPropertiesLink">Favorites</a>
                    </li>
                </ul>
            </li>

在<li class="dropdown-submenu dropdown-menu-right favProperties">内使用鼠标悬停事件我通过使用ajax调用服务器操作来动态创建ul标记。

 $(".favPropertiesLink").on("mouseover", function (e) {
        if ($(e.target).attr('class') == "favPropertiesLink") {

                console.log("called");

                // get favorite properties from db
                $.ajax({
                    type: "GET",
                    traditional: true,
                    async: false,
                    cache: false,
                    url: '/../GISViewer/QuickView/GetFavoriteProperties/',
                    success: function (data) {
                        $(".favProperties ul").remove();
                        if (data.length > 0) {
                            // append favorite properties list in dropdown <li> tag
                            var favProps = document.createElement('ul');
                      //      favProps.setAttribute("class", "dropdown-menu dr_after_before")
                            var innerHtml = "";
                            for (var i = 0 ; i < data.length; i++) {
                                innerHtml = innerHtml + "<li><a href='#'>" + data[i] + "</a></li>";
                            }

                            favProps.innerHTML = innerHtml;
                            $(".favProperties").append(favProps);
                        }

                    },
                    error: function (xhr) {
                        console.log(xhr.responseText);
                        openModalPopup(1, "Favorites", "Error has occurred..");
                    }
                });

        }

但是mouseover事件会多次触发。

贝娄是我的css

.dropdown-submenu{position:relative;}
.dropdown-submenu>a:after{display:block;content:" ";float:left;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 5px 5px 0;border-right-color:#999;margin-top:5px;margin-right:10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;}
.dropdown-menu-right {margin-left:0;}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    right: 100% !important;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}


.dropdown-menu.dr_after_before:before {
        border-width: 0;
    margin-left: 0;

}

.dropdown-menu.dr_after_before:after {
        border-width: 0;
    margin-left: 0;

}

ul.dropdown-menu.nitin {
    display: block;
}

ul.dropdown-menu.dropdown-menu-right,ul.dropdown-menu.dr_after_before {
    border-radius: 10px !important;
    padding: 2px;
    /*min-width: 224px !important;*/
}

可能出现什么问题？