Question

我已经建立了一个网站，对于我的一个页面，我有一些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' %}" />

Answer 1

首先，我会按顺序获得您的基本<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 dev工具等是否有错误。

Answer 2

你在同一页面上加载2个jqueries，可能还有不同的版本，所以事情肯定会变得愚蠢;脚本标签也应该在头部，当然不在<!DOCTYPE>

之前

Javascript和jQuery在同一个HTML文件上

2 个答案: