Selectedli使用jQuery添加LI时不起作用

Question

我在视图上有两个下拉列表。SessionDateSelect将从DB中获取其内容，并且SessionSelect将基于SessionDateSelect SelectedLi获得DB的内容。到目前为止，一切正常。但是，当我单击SessionSelect下拉菜单的内容时，没有任何可行的方法：这是我的代码：

div id="SessionDateSelect">
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="btn-DateSelect" data-toggle="dropdown">انتخاب تاریخ شروع کلاس
            <span class="caret"></span></button>
            <ul class="dropdown-menu" id="dateList">
                @{
                   var dateCollection = Session["classDates"] as List<string>;
                    if (dateCollection != null)
                    {
                        foreach (var item1 in dateCollection)
                        {
                            <li><a id="@item1" href="#">@item1</a></li>
                        }
                    }
                }
            </ul>
    </div>
</div>

<div id="SessionSelect">
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="btn-SessionSelect" data-toggle="dropdown">انتخاب جلسه
            <span class="caret"></span></button>
        <ul class="dropdown-menu" id="classSessions">
        </ul>
    </div>
</div>

这是JS代码：

<script type="text/javascript">
                var selectedDate=null;
                $("#SessionDateSelect").find("li a").click(function() {
                    $('.selectedLi').removeClass('selectedLi');
                    $(this).addClass('selectedLi');
                    selectedDate = $('.dropdown-menu').find("li a.selectedLi").attr('id');
                    var attgrade1 = $('.dropdown-menu').find("li a.selectedLi").text();
                    $('#btn-DateSelect').html("تاریخ شروع دوره" + " " + attgrade1 + '<span class="caret"></span>');
                    if (selectedDate != null) {
                        $.ajax({
                            url: '@Url.Action("GetSessions", "Main")',
                            type: 'POST',
                            traditional: true,
                            data: { 'date': selectedDate },
                            success: function (data) {
                                alert(data);
                                var mySelect = $('#classSessions');
                                for (var i = 1; i <= data; i++)
                                {
                                    mySelect.append(' <li><a id="' + i + '"href="#">' + i + '</a></li>');
                                }
                            }
                        });
                    }
                });
                var selectedSession;
                $("#SessionSelect").find("li a").click(function () {
                    alert('click');
                    $('.selectedLi').removeClass('selectedLi');
                    $(this).addClass('selectedLi');
                    selectedSession = $('.dropdown-menu').find("li a.selectedLi").attr('id');
                    var attgrade = $('.dropdown-menu').find("li a.selectedLi").text();
                    $('#btn-SessionSelect').html("جلسه شماره" + " " + attgrade + '<span class="caret"></span>');
                });

            </script>

Answer 1

谢谢'stephen muecke'更改了JS代码，一切正常：

 var selectedSession;
            $("#classSessions").on('click', 'li', function() {
                var selected = $(this).text();
                $.ajax({
                    url: '@Url.Action("ActionName", "Controller")',
                    type: 'POST',
                    traditional: true,
                    data: {'sessionNumber': selected}
                    });
            });