selectedLi在使用JQuery添加Li時無法工作

我在視圖上有兩個dropDown。 SessionDateSelect將從DB獲得其內容，並且SessionSelect將獲得來自Db的內容，基於SessionDateSelect selectedLi。目前爲止一切正常。但是當我在SessionSelect下拉什麼內容點擊作品：這裏是我的代碼：selectedLi在使用JQuery添加Li時無法工作

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>

來源

2017-09-28 Hossain Ehsani

您需要[事件代表團]（https://learn.jquery.com/events/event-delegation/）來處理動態添加elem上的事件經濟需求 –

感謝「斯蒂芬·馬克」改變了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} 
        }); 

      });

來源

2017-10-01 15:11:16

selectedLi在使用JQuery添加Li時無法工作

回答

相關問題