在django文档准备就绪时使用jquery运行代码
[英]Using jquery to run code when django document is ready
问题描述
I am building a django admin site and am using javascript and jquery (2.0.3) to add some extra functionality to the forms. 
我正在构建一个django管理站点，并使用javascript和jquery（2.0.3）为表单添加一些额外的功能。
I am importing the scripts into my page like this: 我将脚本导入到我的页面中，如下所示：
<html>
<head>
<script type="text/javascript" src="/static/admin/js/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/project/js/project.js"></script>
</head>
<!-- ... -->
</html>
At first I placed the following code at the end of project.js : 首先，我将以下代码放在project.js的末尾：
function tryCustomiseForm() {
// ...
}
$(document).ready(tryCustomiseForm);
Unfortunately this results in an Uncaught TypeError: undefined is not a function exception on the last line. 不幸的是，这会导致Uncaught TypeError: undefined is not a function最后一行Uncaught TypeError: undefined is not a function异常。
I then tried the alternative syntaxes of ready() without any more luck. 然后我尝试了ready()的替代语法，而没有任何运气。
Lastly I explored the change_form.html template and found this inline javascript: 最后，我探索了change_form.html模板并找到了这个内联javascript：
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('form#{{ opts.model_name }}_form :input:visible:enabled:first').focus()
});
})(django.jQuery);
</script>
I was able to modify it to suit my needs and now my project.js ends with: 我能够修改它以满足我的需要，现在我的project.js以：
(function($) {
$(document).ready(function() {
tryCustomiseForm();
});
})(django.jQuery);
While this results in the correct behaviour I don't understand it . 虽然这导致了正确的行为，但我不明白 。
This leads to my question: Why did my first approach fail? 这引出了我的问题：为什么我的第一种方法失败了？ And what is the second approach doing? 第二种方法是做什么的？
3 个解决方案
解决方案1
5 已采纳 2014-12-02 07:47:57
It's hard to tell from the code you've posted, but it looks like the $ variable is not assigned to jQuery in your template; 从你发布的代码中很难说出来，但看起来你的模板中的$ variable没有分配给$ variable; hence the $() construct threw the undefined function error. 因此$()构造抛出了undefined function错误。
The reason the latter works is because it puts a closure around your DOMReady handler, which passes in django.jQuery , which I assume to be the noConflict jQuery assigned variable from your template, and assigns it to the $ within the scope of that: 后者工作的原因是因为它在DOMReady处理程序周围放置了一个闭包，它传递了django.jQuery ，我假设它是模板中的noConflict jQuery赋值变量，并将其分配给范围内的$ ：
(function($) { // < start of closure
// within this block, $ = django.jQuery
$(document).ready(function() {
tryCustomiseForm();
});
})(django.jQuery); // passes django.jQuery as parameter to closure block
解决方案2
2 2014-12-02 08:22:53
Django文档解释了这一点 ：jQuery是命名空间，因此您可以使用django.jQuery在管理模板中引用它。
解决方案3
-1 2014-12-02 07:49:06
try 尝试
$(document).ready(function(){
tryCustomiseForm();
});
function tryCustomiseForm() {
// ...
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.