Django 和 jQuery 的困难（为啥在管理应用程序中 $ 未定义？）

Posted 2023-02-24

技术标签:

【中文标题】Django 和 jQuery 的困难（为啥在管理应用程序中 $ 未定义？）【英文标题】：Difficulty with Django and jQuery (why is $ undefined in the admin app?)Django 和 jQuery 的困难（为什么在管理应用程序中 $ 未定义？） 【发布时间】：2011-06-10 04:57:08 【问题描述】：

我已经有一段时间没有使用 jQuery 了；我想我犯了一个愚蠢的错误。

这是一个 Django 小部件：

class FooWidget(Widget):

    # ...

    class Media:
        js = ('js/foowidget.js',)

这是 .js 文件：

alert("bar");

$(document).ready(function() 
  alert("omfg");
  $('.foo-widget').click(function() 
    alert("hi");
    return false;
  );
);

alert("foo");

唯一触发的alert() 是第一个。我有愚蠢的语法错误吗？

另外，如果页面上包含的其他一些脚本重新定义了$(document).ready，我需要担心吗？我猜后续定义会覆盖我的，因此后续定义执行以下操作会更安全：

$(document).ready(function() 
    document.ready()
    // real stuff
);

在foowidget.js 之前，jQuery 已经包含在页面中了。

更新：根据@lazerscience 的链接，我尝试了以下方法，但仍然像以前一样失败：

alert("bar");

$(function() 
  alert("omfg");
  $(".set-widget").click(function() 
    alert("hi");
    return false;
  );
);

alert("foo");

更新 2：奇怪的是，当我这样做时：

alert($);

我得到“未定义”。这表明 jQuery 实际上没有初始化。这让我很困惑，因为<head> 包括：

<script type="text/javascript" src="/media/js/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.init.js"></script>
<script type="text/javascript" src="/media/js/actions.min.js"></script>
<script type="text/javascript" src="/static/js/foowidget.js"></script>

不将我的脚本放在 jQuery 脚本之后确保 $ 将被定义？

更新 3：来自 jquery.min.js：

/*!
 * jQuery JavaScript Library v1.4.2
 * http://jquery.com/
 *
 * Copyright 2010, John Resig
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 * Copyright 2010, The Dojo Foundation
 * Released under the MIT, BSD, and GPL Licenses.
 *
 * Date: Sat Feb 13 22:33:48 2010 -0500
 */
(function(A,w)function ma()if(!c.isReady)trys.documentElement.doScroll("left")catch(a)setTimeout(ma,1);returnc.ready()function Qa(a,b)b.src?c.ajax(url:b.src,async:false,dataType:"script"):c.globalEval(b.text||b.textContent||b.innerhtml||"");b.parentNode&&b.parentNode.removeChild(b)function X(a,b,d,f,e,j)var i=a.length;if(typeof b==="object")for(var o in b)X(a,o,b[o],f,e,d);return aif(d!==w)f=!j&&f&&c.isFunction(d);for(o=0;o<i;o++)e(a[o],b,f?d.call(a[o],o,e(a[o],b)):d,j);return areturn i? /* ... */

在我看来是正确的。

这是来自 Firebug 控制台：

Error: $ is not a function
[Break On This Error] $(function() 
foowidget.js (line 5)
>>> $
anonymous()
>>> jQuery
undefined
>>> $('a')
null
>>> $(document)
null

更新 4：$ 在我的 Django 站点的所有页面上定义，除了管理应用程序。奇怪...

更新 5：这很有趣。

jQuery.init.js：

// Puts the included jQuery into our own namespace
var django = 
 "jQuery": jQuery.noConflict(true)
;

从控制台：

>>> $
anonymous()
>>> django
Object 
>>> django.jQuery
function()
>>> django.jQuery('a')
[a /admin/p..._change/, a /admin/logout/, a ../../, a ../, a.addlink add/]

【问题讨论】：

您是否使用任何开发工具，例如 Firebug 或 Chrome 开发工具？您应该确认 /media/js/jquery.min.js 脚本标签实际上返回了 jquery 库。我查看了文件。它似乎是 jQuery 库，虽然我没有做差异。其实有一个错误：“$ is not a function” 【参考方案1】：

您可以使用$(document).ready() as often as you want to on one page。它不会重新定义您所说的任何内容，但ready() 的调用会添加在“文档准备就绪”时调用的函数。调试您的代码，例如。使用 Firebug，它将向您显示有关错误发生位置的更详细信息（如果有）！

【讨论】：

Firebug 抱怨 $ 未定义（见上文）如果您使用 django 加载的 jQuery，请使用 (function($) // your code here… )(django.jQuery);! 包装您的代码！使用后我得到django is not defined【参考方案2】：

在Firefox中，查看页面的源代码，然后点击链接“/media/js/jquery.min.js”查看是否加载。很可能您收到了 404，因为您没有正确定义媒体 URL。

您也可以为此目的使用开发服务器，它会显示所有请求和返回的 HTTP 状态码。

【讨论】：

我查过了，不是 404ing。这是我上面更新的 jQuery 代码。【参考方案3】：

使用 Firebug 或 Web Inspector JS 控制台并输入 $ 和/或 jQuery。这是确定库是否已正确加载的最简单方法。在不太可能的情况下，只定义了 jQuery，您可以将脚本包装到它自己的范围内：

(function($)
    // your code here…
)(jQuery);

如果控制台上没有定义任何内容，则问题很可能出在文件上，我会尝试使用 AndiDog 的方法来查看是否加载了任何内容。

【讨论】：

你是对的，控制台确实揭示了问题。（OP 已更新。）你是否有机会包含另一个使用 $ 的库，例如原型？【参考方案4】：

您可能忘记在模板中包含 form.media 。

【讨论】：

您在 OP 中看到 <script> 标签了吗？你真的这么认为吗？【参考方案5】：

将此添加到我的 .js 文件的顶部可以修复它：

var $ = django.jQuery;

我不确定如何删除 jquery.init.js 文件，因为我的项目不包含任何将 $ 用于 jQuery 以外的脚本。

【讨论】：

【参考方案6】：

我通过这种方式解决了这个问题，您必须在此文件中包含 jquery.init.js（通常是来自管理员的 jquery.init.js）添加以下行：

var django = 
    "jQuery": jQuery.noConflict(true)
;
var jQuery = django.jQuery;
var $=jQuery;

你在整个工作区都有 jquery 和 $.为了更好地查看代码，我更喜欢在项目中创建自己的 jquery 初始化文件。

【讨论】：

【参考方案7】：

在 django 中，当您使用 import_export 插件时出现此问题的原因之一。在这种情况下，请按照以下步骤操作 -

键入以下代码 base.html 文件。

% 扩展“admin/import_export/base.html” % % 加载静态 % % 块额外开销 % block.super 静态/admin/js/vendor/jquery/jquery.js 静态/admin/js/jquery.init.js % endblock %

【讨论】：

【参考方案8】：

我包装了我的 js 代码以使用 jQuery：

window.onload = function () 
    if (django.jQuery('body').hasClass('change-list')) 
        ....

【讨论】：

以上是关于Django 和 jQuery 的困难（为啥在管理应用程序中 $ 未定义？）的主要内容，如果未能解决你的问题，请参考以下文章

django为啥不能实现ajax

django 管理和自动完成灯：Select2：找不到 jQuery 实例或 jQuery 兼容库

Django 管理员 - jQuery 命名空间

为啥模型在管理员 Django 中有父类名

jQuery 未在 Django 管理主页/仪表板、登录和注销页面中加载

有人可以向我解释为啥我的 django 管理主题是黑暗的吗？