Django和jQuery的难度(为什么管理员应用程序中的$ undefined?)

Nic*_*ner 13 javascript python django

自从我使用jQuery以来已经有一段时间了; 我想我犯了一个愚蠢的错误.

这是一个Django小部件:

class FooWidget(Widget):

    # ...

    class Media:
        js = ('js/foowidget.js',)
Run Code Online (Sandbox Code Playgroud)

这是.js文件:

alert("bar");

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

alert("foo");
Run Code Online (Sandbox Code Playgroud)

唯一的alert()火灾是第一次.我有一个愚蠢的语法错误或什么?

此外,如果页面上的其他一些包含的脚本重新定义$(document).ready,我是否需要担心它?我猜测后续定义会覆盖我的定义,因此后续定义更安全,例如:

$(document).ready(function() {
    document.ready()
    // real stuff
});
Run Code Online (Sandbox Code Playgroud)

jQuery已经被包含在页面中了foowidget.js.

更新:根据@ lazerscience的链接,我尝试了以下代码,但它仍然像以前一样失败:

alert("bar");

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

alert("foo");
Run Code Online (Sandbox Code Playgroud)

更新2:奇怪的是,当我这样做时:

alert($);
Run Code Online (Sandbox Code Playgroud)

我得到"未定义".这表明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>
Run Code Online (Sandbox Code Playgroud)

不会在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? /* ... */
Run Code Online (Sandbox Code Playgroud)

看起来对我不对.

这是来自Firebug控制台:

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

更新4:$在我的Django网站的所有页面上定义,除了管理员应用程序.奇...

更新5:这很有趣.

jQuery.init.js:

// Puts the included jQuery into our own namespace
var django = {
 "jQuery": jQuery.noConflict(true)
}; 
Run Code Online (Sandbox Code Playgroud)

从控制台:

>>> $
anonymous()
>>> django
Object {}
>>> django.jQuery
function()
>>> django.jQuery('a')
[a /admin/p..._change/, a /admin/logout/, a ../../, a ../, a.addlink add/]
Run Code Online (Sandbox Code Playgroud)

Nic*_*ner 28

将它添加到我的.js文件的顶部修复它:

var $ = django.jQuery;
Run Code Online (Sandbox Code Playgroud)

我不知道如何删除jquery.init.js文件,因为我的项目不包含任何$用于jQuery之外的脚本.


小智 8

我以这种方式解决了这个问题,您必须在该文件中包括jquery.init.js(通常是来自admin的jquery.init.js),并添加以下几行:

var django = {
    "jQuery": jQuery.noConflict(true)
};
var jQuery = django.jQuery;
var $=jQuery;
Run Code Online (Sandbox Code Playgroud)

并且您在整个工作区中都有jquery和$。为了获得更好的代码,我更喜欢在项目中创建自己的jquery初始化文件。


Ber*_*ant 1

您可以$(document).ready() 在一页上随意使用。它不会在您调用它时重新定义ready()任何内容,但调用会添加“文档准备就绪”时调用的函数。调试您的代码,例如。使用 Firebug,它会向您显示有关错误发生位置(如果有)的更详细信息!

  • 如果您使用 django 加载的 jQuery,请用 `(function($){ // your code here... })(django.jQuery);` 包装您的代码! (18认同)
  • 使用后我得到“django is not Defined” (3认同)