脚本在JSfiddle中运行，但不在浏览器上

Question

我在JSfiddle上有一个脚本：它可以让用户从下拉菜单中选择一个日期，如果他们选择“自定义”，它会显示一些日历选项。否则它仍然隐藏。但在我的浏览器上，当我尝试运行相同的脚本，并选择“自定义”时，日历未显示。这是类似的的jsfiddle：http://jsfiddle.net/MgcDU/330/

这是在浏览器上运行的代码片段：我基于基于Stafan了Petre的eyecon.ro/bootstrap-datepicker例如日期选择器

$('#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> 

。

我看不到我做错了什么。

谢谢

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();