Question

自从我使用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之前。

更新：根据@ 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){try{s.documentElement.doScroll("left")}catch(a){setTimeout(ma,1);return}c.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 a}if(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 a}return 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/]

Answer 1

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

var $ = django.jQuery;

我不知道如何删除jquery.init.js文件，因为我的项目不包含任何使用$的脚本而不是jQuery。

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

Answer 5

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

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

Answer 6

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

在名为import_export（templates / admin / import_export）的管理模板目录下创建一个文件夹
在那里创建一个名为base.html的文件（templates / admin / import_export / base.html）
键入下面的代码base.html文件。

{％扩展了“ admin / import_export / base.html”％} {％load static％} {％block extrahead％} {{block.super}} 静态/admin/js/vendor/jquery/jquery.js 静态/admin/js/jquery.init.js
{％endblock％}

Answer 7

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

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

Answer 8

您可能忘记在模板中加入{{ form.media }}。

Django和jQuery的难度（为什么管理员应用程序中的$ undefined？）

8 个答案: