Question

我有一个正在研究的django项目，我对Django和Python很新。我有一个简单的模板，我在base.html文件中调用了所有的css和js文件，而我正在使用{% content block %}填写模板。

正在调用所有css文件，以及所有js文件。我可以通过输入/http://myurl://static/jsfile.js来查看它们。 CSS文件也在我的html文档中工作。唯一不起作用的是任何javascript，甚至没有嵌入式javascript。

这是我的settings.py

# URL prefix for static files.
# Example: "http://media.lawrence.com/static/"
STATIC_URL = '/static/'

# Additional locations of static files
STATICFILES_DIRS = (
# Put strings here, like "/home/html/static" or "C:/www/django/static".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
'/djsite/djsite/static/',
'C:/djsite/djsite/templates/static/',
)

这是我的urls.py

#Sites URLS

from django.conf.urls.defaults import *
from djsite.views import *
from django.conf import settings

# Uncomment the next two lines to enable the admin:
from django.contrib import admin
admin.autodiscover()

urlpatterns = patterns('',
 # Main Pages
url(r'^$', 'django.views.generic.simple.direct_to_template', {'template': 'main/home.html'}),
(r'^about', 'django.views.generic.simple.direct_to_template', {'template': 'main/about.html'}),
(r'^profile', 'django.views.generic.simple.direct_to_template', {'template': 'network/user-home.html'}),                  
(r'^privacy', 'django.views.generic.simple.direct_to_template', {'template':     'main/privacy.html'}),   
(r'^contact/$', 'djsite.views.contact'),

# Uncomment the admin/doc line below to enable admin documentation:
url(r'^admin/doc/', include('django.contrib.admindocs.urls')),

# Uncomment the next line to enable the admin:
url(r'^admin/', include(admin.site.urls)),
)

这是我的这里是我的base.html（它有点长，我尽可能地切断）

<head>
<title>{% block title %}{% endblock %}</title>

<script type="text/javascript">

    //initialize tabs
$(document).ready(function() {
    $('#tabs').tabs();
});

//initialize slider
$(document).ready(function(){
    $('#showcase').bxSlider({
        hideControlOnEnd: true,
        infiniteLoop: false,
    });
}); 

//for portfolio captions
$(window).load(function capTions(){ 
    $("a.caption").each(function(){
        $(this)
            .css({
                "height" : $(this).children("img").height() + "px",
                "width" : $(this).children("img").width() + "px"
            })
            .children("span").css(
                "width", $(this).width() - 10 + "px")
            .find("big").after('<div class="clear"></div>');
            $("a.caption").hover(function(){
                $(this).children("img").stop().fadeTo(500, .6);
                $(this).children("span").stop().fadeTo(500, 1);
            }, function(){
                    $(this).children("span").stop().delay(0).fadeOut(200);
                $(this).children("img").stop().delay(0).fadeTo(500, 1);
            });
    // End $(this)   
    });
});

$(document).ready(function () {
    $("[rel=tooltip]").tooltip({
        placement: 'bottom',
    });
    $("[rel=popover]").popover();
 });
</script>

<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<meta name="author" content="Tyler Bailey">   
<meta name="description" content="" />    
<meta name="keywords" content="" />

<link rel="shortcut icon" href="/favicon.ico" />
{% load staticfiles %}
{% block addl_styles %}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/network.style.css" />
{% endblock %}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="{{ STATIC_URL }}libs/jquery.bxSlider.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}libs/jquery-ui-1.8.22.custom.min.js"></script>  
<script type="text/javascript" src="{{ STATIC_URL }}libs/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/hirestarts.script.js"></script>

</head>

<body>
<div id="wrapper">
    <header>
        {% include 'includes/nav.html' %}
    </header>
<div class="contentContainer">
{% block content %}

{% endblock %}

我现在担心的主要是jquery-ui，但我不明白为什么CSS会加载，我可以查看/ static /文件夹中的所有文件，但JS不能正常工作？

Answer 1

一个明显的问题是你在实际加载jQuery之前调用了jQuery函数。要解决此问题，请在内嵌javascript之前移动所有脚本加载调用：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="{{ STATIC_URL }}libs/jquery.bxSlider.min.js"></script> <script type="text/javascript" src="{{ STATIC_URL }}libs/jquery-ui-1.8.22.custom.min.js"></script> <script type="text/javascript" src="{{ STATIC_URL }}libs/jquery.easing.1.3.js"></script> <script type="text/javascript" src="{{ STATIC_URL }}js/hirestarts.script.js"></script>

Answer 2

我和Django项目有同样的问题。似乎Chrome在刷新页面时不会获取文件，而是从缓存中加载它们。

如果你在Chrome中打开调试并查找你想念的静态文件 - 对我来说 - 它实际上就在那里，但内部有一个早期版本的代码。如果右键单击它以在新选项卡中打开，则会显示其最新内容。

所以，对我来说，Chrome中的 Cmd + Shift + R 就是神奇的。

Django静态JS文件无法加载

2 个答案: