如何使这个jQuery函数服从“document.ready”?

How do I get the jQuery function show below to wait until the DOM has loaded before it's read? I thought that specifying "$(document).ready(function..." at the beginning of the function declaration would do the trick but when my page executes, the function doesn't work and I can see the message "Uncaught ReferenceError: $ is not defined" in my browser's developer console.

如何让下面显示的jQuery函数等待DOM加载后再读取?我认为在函数声明的开头指定“$(文档).ready(函数…)”是可行的，但是当我的页面执行时，函数不起作用，我可以在浏览器的开发控制台看到“Uncaught ReferenceError: $未定义”的消息。

This is my base template:

这是我的基本模板:

# 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>

This Django template extends (is enclosed by) the base template:

这个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>

Of course, if I move the script tag that calls jQuery up inside the block in my base template, the function executes. However, I'd prefer to keep my jQuery script element at the bottom of my base template as is illustrated in the Bootstrap documentation. Is there a way to get this function to work if jQuery is referenced after the function that calls it in my page?

当然，如果我将调用jQuery的脚本标记移动到我的基本模板中的块中，这个函数就会执行。但是，我希望将jQuery脚本元素保留在基本模板的底部，如引导文档所示。如果在我的页面中调用jQuery的函数之后引用jQuery，是否有办法让这个函数正常工作?

Thanks.

谢谢。

-- FOLLOW-UP --

——后续

I credited fyrb with the answer since he answered first and I ended up doing what he proposed, but I appreciated the other answers too. I'm adding links to some good posts on this subject below for the benefit of others who have this question. There are some good performance reasons for putting your jquery call at the end of the page as will be seen in these articles.

我把这个答案归功于fyrb，因为他先回答了我的问题，最后我按照他的建议做了，但我也很欣赏其他的答案。我在下面添加了一些关于这个主题的好文章的链接，以帮助其他有这个问题的人。将jquery调用放在页面末尾有一些很好的性能原因，如本文所示。

Stop paying your jQuery tax
停止支付jQuery税
Should Jquery code go in header or footer?
Jquery代码应该放在页眉还是页脚?
When do you choose to load your javascript at the bottom of the page instead of the top?
何时选择在页面底部而不是顶部加载javascript ?
why javascript runs when at bottom of page or sometimes from top of page
为什么javascript在页面底部运行，有时从页面顶部运行?
pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
纯JavaScript相当于jQuery的$.ready()，当页面/dom准备好时如何调用函数
$(document).ready equivalent without jQuery
美元(文档)。准备好相当于没有jQuery

3 个解决方案

#1

Essentially it boils down to the fact that you need to include jQuery before using its methods.

本质上，这归结为一个事实，即在使用jQuery方法之前，您需要包括jQuery。

Typically you would have your

通常你会有

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

In the html <head> tag

在html 标签中

I'm less familiar with Django, but is there a reason why you wouldn't want jQuery and bootstrap in the document head?

我对Django不太熟悉，但是有什么原因使您不希望jQuery和bootstrap出现在文档头中呢?

In any case, you need to include those scripts before your code.

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

Otherwise, you can take a look at this: $(document).ready equivalent without jQuery

否则，您可以看看这个:$(文档)。准备好相当于没有jQuery

#2

Normally it is best practice to put js scripts in the bottom because it lock up the page load. But when it comes to jQuery it is best to put it right after style and the rest of script can be at the bottom.

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

To solve your problem all you have to do is move jQuery import before you use the $ variable. It caused an error because at that time $ does not exist yet.

要解决这个问题，您只需在使用$变量之前移动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

Since you are using $(document).ready function, essentially you are trying to access $ (jquery variable which is not loaded)

因为您正在使用$(document)。准备函数，本质上你要访问$ (jquery变量未加载)

So one solution can be to load jquery in head and rest of your javascript files can reside at bottom of page and all JS code can then be added at .ready event.

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

But if you want to embed even jQuery in the footer, then you can use multiple methods of doing so as showcased well in answer to below question:

但是如果你想在页脚中嵌入jQuery，那么你可以使用多种方法来完成，如下面的问题所示:

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

纯JavaScript相当于jQuery的$.ready()，当页面/dom准备好时如何调用函数

One which i prefer:

我喜欢:

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

})();
</script>

Recommendation:

#1