django文档准备好时使用jquery运行代码答案

【问题标题】：Using jquery to run code when django document is readydjango文档准备好时使用jquery运行代码
【发布时间】：2023-07-07 19:30:01
【问题描述】：

我正在构建一个 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);

虽然这会导致正确的行为我不明白。

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

【问题讨论】：

我认为 django 框架使用美元 $ 符号代替 jQuery。因此，您需要围绕 jQuery 函数创建一个容器，在其中将 jQuery 分配给美元符号，仅用于容器内的代码

标签： javascript jquery html django events

【解决方案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

【讨论】：

看起来这是正确的，因为以下工作django.jQuery(document).ready(tryCustomiseForm);感谢您的帮助。
@KellyThomas 没问题，很高兴为您提供帮助
@KellyThomas ，我发现jQuery noconflict docs 有助于解释这一点。

【解决方案2】：

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

【讨论】：

【解决方案3】：

试试

$(document).ready(function(){

 tryCustomiseForm();

}); 

function tryCustomiseForm() {
    // ...
}

【讨论】：

这在逻辑上与 OP 第一次尝试的完全一样，但没有成功。
这与在另一个匿名函数中调用tryCustomiseForm() 函数不完全相同。