0

我已经建立了一个网站，并且对于我的一个页面，我有一些 jQuery 元素 [开始按钮、进度条]。我在页面中实现了一个 javascript 计时器，当我将 javascript 信息放入标题中时，jQuery 不再工作。我该如何避免这个问题？谢谢

jQuery Works/Javascript 不起作用 {% load staticfiles %}

<link rel="stylesheet" type="text/css" href="{% static 'livestream/css/style.css' %}" />
<!DOCTYPE html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">        </script>
<script type="text/javascript" src="{% static 'livestream/jquery-    timer/res/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/jquery.timer.js' %}"></script>
    <script type="text/javascript" src="{% static 'livestream/jquery-timer/res/demo.js' %}"></script>
<html>
    <head>
        <style>
            .progressInfo {
                margin-left: leftmargin;   
            }
        </style>


        <meta charset="utf-8" />
        <title>Main</title>
        <link rel="stylesheet"     href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="{% static 'livestream/css/style.css' %}" />

jQuery 不工作/Javascript 工作 {% load staticfiles %}

<link rel="stylesheet" type="text/css" href="{% static 'livestream/css/style.css' %}" />
<!DOCTYPE html>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">    </script>

<html>
    <head>
        <style>
                .progressInfo {
                margin-left: leftmargin;   
            }
        </style>


        <meta charset="utf-8" />
        <title>Main</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript" src="{% static 'livestream/jquery-timer/res/jquery.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'livestream/jquery-timer/jquery.timer.js' %}"></script>
        <script type="text/javascript" src="{% static 'livestream/jquery-timer/res/demo.js' %}"></script>
        <link rel="stylesheet" href="{% static 'livestream/css/style.css' %}" />
4

2 回答 2

2

首先，我会<html>整理好你的基本信息。我尝试总是使用类似...

<!DOCTYPE html>
<html>
     <head>
        <meta>
        <title>
        <script></script>
        <link>
     </head>
     <body>
     </body>
</html>

然后，加载 jQuery，然后加载任何 jQuery 脚本（不要忘记使用 minifed 版本）。确保您只加载一个版本的 jQuery，如果您使用的脚本不符合您当前运行的版本，则升级 jQuery 或脚本（以较旧的为准）。正如@Antti Happala 提到的，jQuery 的多个实例将肯定会引起问题。

我在开发过程中做的另一件事是使用 .js 和 .css 文件的本地版本，直到我知道一切正常，然后我转换到托管版本，重新测试然后上线。

所以，我会尝试类似（从你的第一个例子）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Main</title>

        <script type="text/javascript" src="js/jquery-latest.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.js"></script>
        <script type="text/javascript" src="js/jquery.timer.js"></script>
        <script type="text/javascript" src="js/demo.js"></script>

        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="css/newCustomCSSFileForYourSpecificCSS.css" />
    </head>
    <body>
        <!-- Your good stuff here -->
    </body>
</html>

http://html5boilerplate.com/是寻找示例的好地方

所有 .js 文件都将下载到本地 js 文件夹中，所有 .css 文件将保存在本地的 css 文件夹中（同样，您可以在上线时更改为托管版本。）确保您只引用任何 . js 或 .css 文件一次，并在可能的情况下合并和缩小。

最后，确保您的 .js 文件都使用相同版本的 jQuery。如果这不起作用，请开始检查 firebug/chrome 开发工具等是否有错误。

于 2013-07-30T23:49:15.037 回答
0

您在同一页面上加载了 2 个 jquery，并且可能是不同的版本，所以事情肯定会变得愚蠢；脚本标签也应该在头部，当然不能在之前<!DOCTYPE>

于 2013-07-30T23:11:02.663 回答