Javascript 在第一次加载时不起作用答案

【问题标题】：Javascript doesn't work in first loadJavascript 在第一次加载时不起作用
【发布时间】：2013-07-31 14:36:52
【问题描述】：

我正在使用 jquery UI datepicker，但遇到了问题。我的日期选择器在第一次加载时不起作用。我搜索并尝试用 document.ready 替换 windows.load，但也不起作用：/ 我的代码是：

$(window).load(function() {
  alert('carregado!')   
  $('.datepicker').datepicker({ format: 'dd/mm/yyyy', language: 'pt-BR', autoclose: true});
  $('#status_bar').barrating( {
    onSelect: function(value, text) {
      $('#projeto_status').val(value);
    }
  });
});

我看到其他人的答案，但没有人与我合作。一个观察，我的项目是在rails 4，我用turbolinks

【问题讨论】：

请详细说明“不工作”。仔细观察，您可能只是在第二行之后缺少;。
试试 $(document).ready

标签： jquery ruby-on-rails jquery-ui jquery-ui-datepicker turbolinks

【解决方案1】：

是的！谢谢！我明白了！

我碰巧这个功能，看：

var do_on_load = function(){
  alert('carregado!')   
  $('.datepicker').datepicker({ format: 'dd/mm/yyyy', language: 'pt-BR', autoclose: true});
  $('#status_bar').barrating( {
    onSelect: function(value, text) {
      $('#projeto_status').val(value);
    }
  });
}

$(document).ready(do_on_load)
$(window).bind('page:change', do_on_load)

现在，解决了！！ :D

【讨论】：

谢谢！你为我节省了很多时间。

【解决方案2】：

我建议在您的浏览器中使用开发者工具 (F12) 以确保您的所有脚本都被正确加载并且您没有遇到任何与它们相关的错误。

您需要确保您正在加载必要的 jQuery 脚本和 jQueryUI 脚本（按此顺序），并且在加载这些脚本之前没有调用您的 datepicker() 函数：

<!-- Related jQuery and jQueryUI scripts and CSS -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<!-- Place any scripts related to your barrating plugin here -->

<script type='text/javascript'>
  //Shorthand for $(document).ready(){ ... }
  $(function(){
    alert('carregado!')   
    //Your DatePicker
    $('.datepicker').datepicker({ format: 'dd/mm/yyyy', language: 'pt-BR', autoclose: true});
    //Ensure that you are closing each of these properly
    $('#status_bar').barrating({
         onSelect: function(value, text) {
              $('#projeto_status').val(value);
         }
    });
  });
</script>

Example

【讨论】：