Javascript Django和jQuery有困难（为什么在管理应用程序中$undefined？）

我已经有一段时间没有使用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
});

jQuery在

foowidget.js

is时已经包含在页面中

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

alert("bar");

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

alert("foo");

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

alert($);

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

包括：

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

在我看来是正确的

这来自Firebug控制台：

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

更新4：

$

在my 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/]

您可以使用

$（document）.ready（）

。它不会在调用时重新定义任何内容，但调用

ready（）

会添加在“文档准备就绪”时调用的函数。

---

调试您的代码，例如使用Firebug，它将向您显示有关错误发生位置（如果有）的更多详细信息

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

---

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

使用Firebug或Web Inspector JS控制台，键入

$

和/或

jQuery

。这是确定库是否已正确加载的最简单方法。在不太可能的情况下，只有jQuery被定义，您可以将脚本包装到它自己的作用域中：

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

---

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

您可能忘记了在模板中包含

{{form.media}

。

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

var $ = django.jQuery;

---

我不知道如何删除jquery.init.js文件，因为我的项目不包含任何使用

$

的脚本来实现jquery以外的其他功能。

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

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

---

在整个工作区中有jquery和$。为了更好地查看代码，我更喜欢在project中创建自己的jquery init文件。

在django中，使用导入导出插件时出现此问题的一个原因。在这种情况下，请遵循以下步骤：

在管理员模板目录下创建一个名为import\u export（templates/admin/import\u export）的文件夹

在那里创建一个名为base.html的文件（templates/admin/import\u export/base.html）

键入下面的code base.html文件

{%extends“admin/import\u export/base.html”%} {%load static%} {%block extrahead%} {{block.super}} static/admin/js/vendor/jquery/jquery.js static/admin/js/jquery.init.js
{%endblock%}

---

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

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

---

您是否使用Firebug或Chrome开发工具等开发工具？您应该确认/media/js/jquery.min.js脚本标记实际上返回了jquery库。我查看了该文件。它似乎是jQuery库，尽管我没有做任何区分。实际上，有一个错误：“$不是函数”您看到OP中的

标记了吗？你真的这么想？我查过了，不是404。正如我在上面更新的，这是jQuery代码。你是对的，控制台确实暴露了问题。（OP更新）您是否有可能包括另一个使用$的库，例如prototype？Firebug抱怨$未定义（见上文）。如果您使用的是django加载的jQuery，请使用

（函数（$）{//your code here…}）（django.jQuery）包装您的代码！使用后，我得到的
django没有定义
window.onload = function () {
    if (django.jQuery('body').hasClass('change-list')) {
        ....
    }
}