Question

我正在构建一个django管理站点，并使用javascript和jquery（2.0.3）为表单添加一些额外的功能。

我将脚本导入我的页面，如下所示：

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

首先，我将以下代码放在project.js：

的末尾

function tryCustomiseForm() {
    // ...
}

$(document).ready(tryCustomiseForm);

不幸的是，这导致最后一行出现Uncaught TypeError: undefined is not a function异常。

然后我尝试了ready()的替代语法而没有任何运气。

最后，我探索了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>

我能够根据自己的需要对其进行修改，现在我的project.js以：

结尾

(function($) {
    $(document).ready(function() {
        tryCustomiseForm();
    });
})(django.jQuery);

虽然这会导致正确的行为我不理解。

这引出了我的问题：为什么我的第一种方法失败了？第二种方法是做什么的？

Answer 1

很难从您发布的代码中看出来，但看起来$变量未在模板中分配给jQuery;因此$()构造引发了undefined function错误。

后者工作的原因是因为它在你的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

Answer 2

Django文档explain this：jQuery是命名空间，因此您可以使用django.jQuery在管理模板中引用它。

Answer 3

试

$(document).ready(function(){

 tryCustomiseForm();

}); 

function tryCustomiseForm() {
    // ...
}

在django文档准备就绪时使用jquery运行代码

3 个答案: