Jquery 날짜 선택 도구 탭

Question

날짜 선택 도구에 문제가 있습니다. 내 사이트에 대한 탭 작업을하고 있습니다. 그것은 이렇게 간다

<script> 
      $(document).ready(function(){ 


       var first = $('.Partner').html(); 
       $('.content').append(first); 
       $('.tabs:first').css('border-bottom','3px solid #36c'); 
       $('.check').datepicker({dateFormat: 'dd-mm-yy'}); 

       $('.check').click(function(){ 
        $('.check').datepicker({dateFormat: 'dd-mm-yy'}); 
       }); 


       $('.tabs').click(function(){ 
        var href = $(this).attr('alt'); 
        $('.tabs').css('border-bottom','3px solid #f4f3f2'); 
        $(this).css('border-bottom','3px solid #36c'); 
        var content = $('.'+href).html(); 

        $('.content').html(content); 
        $('.check').datepicker({dateFormat: 'dd-mm-yy'}); 
        return false; 
       }); 



      }); 

     </script> 

처음에는 클릭 한 텍스트 상자에 datepicker 제안을 표시합니다. 다른 탭을 클릭하고 초기 탭으로 돌아 가면 날짜 선택기 기능이 작동하지 않습니다.

내 HTML

<div class="container"> 
       <ul class="nav"> 
        <li><a class="tabs" alt="Partner">Partner Report</a></li> 
        <li><a class="tabs" alt="Single">Single Partner Report</a></li> 
        <li><a class="tabs" alt="Expiring">Expiring Plan</a></li> 
        <li><a class="tabs" alt="Whole">Whole Partner Report</a></li> 
       </ul> 
      </div> 
      <div class="content"> 

      </div> 
      <div class="Partner"> 
       <div class="container"> 
        <div class="row-fluid"> 
         <div class="span6"> 
          <legend>Enter Tuition Id</legend> 
          <input type="text" name="getid" class="searchvalue" placeholder="Enter Tuition Id"/> 
          <input type="button" class="btn btn-info search" style="margin-top:-8px;" value="Search"/> 
         </div> 
         <div class="span6"> 
          <legend>Select Date for Report Generation</legend> 
          <div class="row-fluid"> 
           <div class="span12"> 
            <a href="#">Generate Report from last sent report</a> 
           </div> 
           <div class="span12"> 
            <div class="row-fluid" style="margin-left: -14px;"> 
             <div class="span6"> 
              <label>From</label> 
              <input type="text" name="datePicker" class="datePick" id="datePick"/> 
              <input type="text" class="check"/> 
             </div> 
             <div class="span6"> 
              <label>To</label> 
              <input type="text" id="dateto"/> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="individual-content"> 
         <legend>Search Results</legend> 
         <div class="tab-content"> 

         </div> 
        </div> 
       </div> 
      </div> 
      <div class="Single"> 
       <div class="container">Single Partner</div> 
      </div> 
      <div class="Expiring"> 
       <div class="container">Expiring Plan</div> 
      </div> 
      <div class="Whole"> 
       <div class="container">Whole Partner</div> 
      </div> 

Answer 1

당신은 처음에 설정 한 날짜 선택기를 식별하는 JQuery와에 의해 사용되는 ID를 복사합니다. 사용해보기 ...

$(document).ready(function(){ 

     var first = $('.Partner').html(); 
     $('.content').append(first); 
     $('.tabs:first').css('border-bottom','3px solid #36c'); 

     showContent('Partner'); 

     $('.tabs').click(function(){ 
      var href = $(this).attr('alt'); 
      $('.tabs').css('border-bottom','3px solid #f4f3f2'); 
      $(this).css('border-bottom','3px solid #36c'); 

      showContent(href); 

      return false; 
     }); 


    }); 

function showContent(href){    
      var content = $('.'+href).html(); 

      $('.content') 
       .html(content) 
       .find('.check').datepicker({dateFormat: 'dd-mm-yy'}); 
}