JSfiddle에서 실행 중이지만 브라우저에서는 실행되지 않는 스크립트

Question

작동하는 JSfiddle에 스크립트가 있습니다. 사용자가 날짜를 선택하고 드롭 다운 메뉴에서 '사용자 정의'를 선택하면 일부 일정 옵션이 표시됩니다. 그렇지 않으면 숨겨진 상태로 유지됩니다. 하지만 내 브라우저에서 동일한 스크립트를 실행하려고 할 때 '사용자 정의'를 선택하면 달력이 표시되지 않습니다. 이것은 JSfiddle에 등입니다 :

$('#time').on('change', function(){ 
    if($(this).val() == 'custom'){ 
     $('#interval_selector').show(); 
     } 
    else{ 
     $('#interval_selector').hide(); 
     } 
}); 

    $(function(){ 
     window.prettyPrint && prettyPrint(); 

     var startDate = new Date(2012,1,20); 
     var endDate = new Date(2012,1,25); 
     $('#dp4').datepicker() 
      .on('changeDate', function(ev){ 
       if (ev.date.valueOf() > endDate.valueOf()){ 
        $('#alert').show().find('strong').text('The start date can not be greater then the end date'); 
       } else { 
        $('#alert').hide(); 
        startDate = new Date(ev.date); 
        $('#startDate').text($('#dp4').data('date')); 
       } 
       $('#dp4').datepicker('hide'); 
      }); 
     $('#dp5').datepicker() 
      .on('changeDate', function(ev){ 
       if (ev.date.valueOf() < startDate.valueOf()){ 
        $('#alert').show().find('strong').text('The end date can not be less then the start date'); 
       } else { 
        $('#alert').hide(); 
        endDate = new Date(ev.date); 
        $('#endDate').text($('#dp5').data('date')); 
       } 
       $('#dp5').datepicker('hide'); 
      }); 
    }); 

</script> 

<div class="page-header"> 
    <h2 id="changer">Enter the Event you would like to follow:</h2> 
</div> 


<style> 
#interval_selector{ 
    display:none; 
    background:none; 
    margin:10px; 
} 
</style> 

<div class="row"> 
<div class="span11"> 
<form id ="eventForm"> 
    <select name="period" id="time"> 
     <option value="beginning" selected="selected">Process all Tweets from start</option> 
     <option value="RealTime tweeting">Process all Tweets in real-time</option> 
     <option value="the last 24 hours">Last 24 hours</option> 
     <option value="the previous week">Previous week</option> 
     <option value="custom">Custom</option> 
    </select> 

    <input type="submit" id="open" onclick="heading()" value="Start Visualization" /> 

    <input type="button" onclick="closeMap()" value="Stop Request"/> 

    <div id="interval_selector"> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th>Start date<a href="#" class="btn small" id="dp4" data-date-format="yyyy-mm-dd" data-date="2012-02-20"> Change</a></th> 
        <th>End date<a href="#" class="btn small" id="dp5" data-date-format="yyyy-mm-dd" data-date="2012-02-25"> Change</a></th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr> 
        <td id="startDate "> 2012-02-20</td> 
        <td id="endDate "> 2012-02-25</td> 
       </tr> 
       </tbody> 
      </table> 
     </div> 
    </form> 
</div> 


<div class="span1"> 
<form name="moreAnalysis" id="moreAnalysis" action="/p" method="post"> 
<input type="submit" value="Further Analysis"> 
</form> 
</div> 
</div> 

내가 Stafan 페트르의 eyecon.ro/bootstrap-datepicker 예에 따라에 날짜 선택기를 기반으로했습니다 http://jsfiddle.net/MgcDU/330/

이 브라우저에서 실행되는 코드 조각이다.

내가 뭘 잘못하고 있는지 알 수 없습니다.

감사합니다.

Answer 1

jsfiddle은 기본적으로 창로드에서 실행됩니다. 비슷한 효과를 얻으려면 코드를 $(document).ready(function(){...})에 입력하십시오. (귀하의 발췌 문장에서 첫 번째 코드 블록을보고 있습니다)

$(function(){ // <--- THIS LINE WAS MOVED 
    $('#time').on('change', function(){ 
     if($(this).val() == 'custom'){ 
      $('#interval_selector').show(); 
      } 
     else{ 
      $('#interval_selector').hide(); 
      } 
    }); 
    window.prettyPrint && prettyPrint();