引导下拉列表仅删除一次

我有以下引导导航栏：

        <div class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="@Href("~")">Admin</a>
                        @if (User.Identity.IsAuthenticated)
                        {
                            <ul class="nav navbar-nav">
                                <li class="dropdown" id="accessList">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="accessListTopLink">Backend Options <span class="caret"></span></a>
                                </li>
                            </ul>
                        }
                        <ul class="nav navbar-nav">
                            <li>@Html.ActionLink("Home", "ActionSelection", "View")</li>
                            @if (User.Identity.IsAuthenticated)
                            {
                                <li><a class="navbar-brand" href="@Url.Action("LogOut", "User")">Log Out</a></li>
                            }
                        </ul>
                    </div>
                </div>
            </div>
        </div>

然后 html 文件中的这个脚本：

        <script type="text/javascript">
            $(document).ready(function () {
                $('#accessList').one('click', function() {
                    LoadAccessList('@User.Identity.Name');
                });
                $('.accessList').on('click', function () {
                    alert('Hi');
                });
            });
        </script>

LoadAccessList js 函数是：

function LoadAccessList(email) {
    var dropDownControl = $('#accessList');
    var topLinkControl = $('#accessListTopLink');
    // Load the available access list options from the service
    $.ajax({
        type: "GET",
        data: {
            email: email
        },
        url: '../User/LoadAccessList',
        success: function(resultsList) {
            var htmlToAdd = '<ul class="dropdown-menu" role="menu">';
            // Loop through and add all actions in.
            $.each($.parseJSON(resultsList), function(index, accessOption) {
                var serviceName = accessOption.Name;
                var url = accessOption.Url;
                htmlToAdd = htmlToAdd + '<li class="accessList"><a onclick="alert(''Hi'')" href="' + url + '">' + serviceName + '</a></li>';
            });
            htmlToAdd = htmlToAdd + '</ul>';
            topLinkControl.after(htmlToAdd);
            dropDownControl.dropdown();
        },
        error: function(errorData) {
            // Error code passed back here.
            bootbox.alert('Error loading access list. Result was: <b>' + errorData.statusText + '</b>');
        }
    });
}

此 ajax 调用基本上加载将添加到列表中以导航到各种站点的名称和 url 列表。

我有 2 个问题：

当我运行页面并单击"后端选项"时，它会显示下拉列表，但是如果我尝试单击任何链接，我会收到警报（"Hi"），但它不会导航到 href 中的链接。

其次，在初始单击下拉列表然后单击后，它不再响应另一次单击，因此您无法再次看到下拉列表。

任何帮助将不胜感激，因为这让我发疯！

编辑：

这是代表我问题的 jsfiddle 链接。

dropDownControl.dropdown();

dropDownControl.show();