如何让这个 jQuery 函数服从“document.ready”？答案

【问题标题】：How to get this jQuery function to obey "document.ready"?如何让这个 jQuery 函数服从“document.ready”？
【发布时间】：2016-10-15 14:00:12
【问题描述】：

如何让下面显示的 jQuery 函数等到 DOM 加载完毕后再读取？我认为在函数声明的开头指定“$(document).ready(function...”可以解决问题，但是当我的页面执行时，该函数不起作用，我可以看到消息“Uncaught ReferenceError: $ 未定义”在我的浏览器的开发者控制台中。

这是我的基本模板：

# base.html
<!DOCTYPE html>
<html>
...
<body>
{% block page_container %} {% endblock %}
...
<script src="https://code.jquery.com/..."></script>
<script src="js/bootstrap.min.js"></script>
...
</body>
</html>

这个 Django 模板扩展（被包围）基本模板：

# upload_file.html
{% extends base.html %}

(HTML for form ...)
<label class="btn btn-success btn-file">
    Select Photo <input type="file" name="photo" style="display: none;">
</label>
(more HTML...)

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

      $(document).on('change', ':file', function() {
        var input = $(this),
            numFiles = input.get(0).files ? input.get(0).files.length : 1,
            label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
        input.trigger('fileselect', [numFiles, label]);
      });

      $(document).ready( function() {
          $(':file').on('fileselect', function(event, numFiles, label) {

              var input = $(this).parents('.input-group').find(':text'),
                  log = numFiles > 1 ? numFiles + ' files selected' : label;

              if( input.length ) {
                  input.val(log);
              } else {
                  if( log ) alert(log);
              }

          });
      });

    });
</script>

当然，如果我将调用 jQuery 的脚本标签向上移动到我的基本模板中的块内，函数就会执行。但是，我更愿意将 jQuery 脚本元素保留在基本模板的底部，如 Bootstrap 文档中所示。如果在我的页面中调用它的函数之后引用了 jQuery，有没有办法让这个函数工作？

谢谢。

-- 跟进--

我将答案归功于 fyrb，因为他首先回答了我，我最终按照他的建议做了，但我也很欣赏其他答案。为了其他有这个问题的人的利益，我在下面添加了一些关于这个主题的好帖子的链接。将 jquery 调用放在页面末尾有一些良好的性能原因，这些文章将在这些文章中看到。

【问题讨论】：

标签： jquery django twitter-bootstrap

【解决方案1】：

基本上归结为您需要在使用其方法之前包含 jQuery。

通常你会拥有你的

<script src="https://code.jquery.com/..."></script>
<script src="js/bootstrap.min.js"></script>

在html中<head>标签

我对 Django 不太熟悉，但是您是否有理由不希望在文档头中使用 jQuery 和 bootstrap？

无论如何，您都需要在代码之前包含这些脚本。

要不然你可以看看这个：$(document).ready equivalent without jQuery

【讨论】：

【解决方案2】：

通常最好将 js 脚本放在底部，因为它会锁定页面加载。但是对于 jQuery，最好把它放在 style 之后，其余的脚本可以放在底部。

要解决您的问题，您只需在使用 $ 变量之前移动 jQuery 导入。它导致了一个错误，因为当时 $ 还不存在。

# base.html
<!DOCTYPE html>
<html>
...
<script src="https://code.jquery.com/..."></script>    <!-- move this line here -->
</head>
<body>
{% block page_container %} {% endblock %}
...
<script src="js/bootstrap.min.js"></script>
...
</body>
</html>

【讨论】：

【解决方案3】：

由于您使用的是 $(document).ready 函数，实际上您是在尝试访问 $（未加载的 jquery 变量）

因此一种解决方案是在头部加载 jquery，其余的 javascript 文件可以驻留在页面底部，然后可以在 .ready 事件中添加所有 JS 代码。

但是，如果您甚至想在页脚中嵌入 jQuery，那么您可以使用多种方法来这样做，正如在回答以下问题时所展示的那样：

pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

我更喜欢的一个：

<script>
// self executing function here
(function() {
   // your page initialization code here
   // the DOM will be available here

})();
</script>

推荐：

但我建议在页面中使用至少 jquery 和页面中的其他组件，然后可以在页面末尾加载其余的 JS 文件。由于 jquery 是页面的一个非常重要的组件，其他内部/外部组件可能对它有依赖关系。休息取决于您的用例和实施。

【讨论】：