2017-09-28 5 views
0

보기에 두 개의 dropDown이 있습니다. SessionDateSelect은 DB에서 해당 내용을 가져오고 SessionSelect은을 기반으로 Db의 내용을 가져옵니다. 지금까지 모든 것이 잘 작동합니다. JS 코드를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> 

하고 여기에 있습니다 : : 여기 을 내 코드입니다 : 내가 SessionSelect 드롭 다운 아무것도의 내용을 클릭 할 때 작동하지만

<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> 
+1

당신은 [이벤트 위임] 필요 (https://learn.jquery.com/events/event-delegation/) 동적으로 추가 ELEM의 이벤트를 처리하는 ents –

답변

0

덕분에 '스티븐 뮈크' 는 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} 
        }); 

      });