Question

在尝试实现配置javascript文件以基于开发或生产环境启用/禁用用户界面功能时，我注意到一些奇怪的行为，并且可以使用一些说明。

这是一个平面应用程序，我将javascript分成三个文件：index.js，dashboard.js和taxonomy.js。

<script type = "text/javascript" src = "/static/js/taxonomy.js"></script>
<script type = "text/javascript" src = "/static/js/dashboard.js"></script>
<script type = "text/javascript" src = "/static/js/index.js"></script>
<script type = "text/javascript" src = "/static/js/config.js"></script>

索引脚本处理登录，注销和元素初始化功能。它定义为

$(document).ready(function(){ 
  $.ajax({
    //query db for login
    success : function(){
      loginHandler()
    }
});

function loginHandler(){
  initializeDashboardElements()
  initializeTaxonomyElements()
}

在taxonomy.js中，没有$(document).ready()定义，但initializeTaxonomyElements()存在，它将jQuery UI绑定应用于指定的HTML元素。一个这样的元素是一个选项卡小部件，当前包含4个选项卡，但预计会增长。

在config.js内，我将其用于生产环境：

$(document).ready(function(){
  $("#tabs").tabs("option", "disabled", [1, 2]);
});

鉴于此设置，我收到错误

Error: cannot call methods on tabs prior to initialization; attempted to call method 'option'

我还在initializeTaxonomyElements()声明中使用$(document).ready()尝试了此操作。发生同样的错误。

有任何解决此问题的建议吗？

Answer 1

原因是AJAX调用立即退出（其目的是附加事件处理程序， not 等待事件;它的success部分仅在AJAX之后触发请求由服务器完成）。几乎可以肯定$(document).ready(function(){ $("#tabs").tabs("option", "disabled", [1, 2]); });中的函数在initializeTaxonomyElements()中的任何初始化之前都会执行。

要解决此问题，请调用$("#tabs").tabs("option", "disabled", [1, 2]);作为AJAX success方法的一部分执行（initializeTaxonomyElements()之后）。

jQuery，$（document）.ready（{ - }），多个函数和多个文件

1 个答案: