如何让下面的jQuery函数在DOM加载完成后再读取?我以为在函数声明的开头指定"$(document).ready(function..."就可以解决问题,但当我的页面执行时,该函数不起作用,我可以在浏览器的开发者控制台中看到消息"Uncaught ReferenceError: $ is not defined"。
这是我的基本模板:
这个 Django 模板是基于(被包含在)基础模板中的:
当然,如果我将调用jQuery的脚本标签移动到基本模板中的块内,该函数将执行。但是,我更喜欢将jQuery脚本元素保留在基本模板底部,如Bootstrap文档所示。如果在页面中调用它的函数之后引用jQuery,有没有办法使此函数起作用?
谢谢。
-跟进-
我将答案归功于fyrb,因为他回答得最快,我最终做了他建议的事情,但我也欣赏其他答案。为了让其他人受益,我在下面添加了一些关于这个问题的好文章链接。从这些文章中可以看出,将jquery调用放在页面末尾有一些很好的性能原因。
这是我的基本模板:
# 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调用放在页面末尾有一些很好的性能原因。