将jQuery添加到Header.php文件失败

Question

我将jQuery库添加到header.php文件中，但index.php文件无法访问该库。 但是，当直接从index.php文件引用该库时，index.php文件可以访问jQuery库。

这是文件的结构。

---header.php---
--index.php-----

以下是header.php的代码

 <!DOCTYPE html> <html> <head> <title>Title of the document</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="jquery-1.11.3.min.js"></script> <script type='text/javascript' src='scroll.js'></script> </head <body> <header> <a href="/datacentre/index.php" title="Return to the homepage" id="logo"> <img src="/datacentre/images/cagd_logo.jpg" alt="CAGD logo" style="width:30px;height:30px;"/> </a> <span class="headerspan">CAGD Data Centre</span> <a href="/datacentre/webhelp/index.htm" title="Return to the homepage" id="helpfile"> help </a> </header>

index.php的代码

 <?php include('/header.php'); ?> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Row 1</td> <td>Row 1</td> <td>Row 1</td> <td>Row 1</td> <td>Row 1</td> </tr> <tr> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> </tr> <tr> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> </tr> <tr> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> </tr> <tr> <td>Row 5</td> <td>Row 5</td> <td>Row 5</td> <td>Row 5</td> <td>Row 5</td> </tr> <tr> <td>Row 6</td> <td>Row 6</td> <td>Row 6</td> <td>Row 6</td> <td>Row 6</td> </tr> <tr> <td>Row 7</td> <td>Row 7</td> <td>Row 7</td> <td>Row 7</td> <td>Row 7</td> </tr> <tr> <td>Row 8</td> <td>Row 8</td> <td>Row 8</td> <td>Row 8</td> <td>Row 8</td> </tr> <tr> <td>Row 9</td> <td>Row 9</td> <td>Row 9</td> <td>Row 9</td> <td>Row 9</td> </tr> <tr> <td>Row 10</td> <td>Row 10</td> <td>Row 10</td> <td>Row 10</td> <td>Row 10</td> </tr> </tbody> </table> </body> </html>

Javascript scroll.js的代码

 $('table').on('scroll', function () { $("table > *").width($("table").width()) + $("table").scrollLeft()); });

CSS代码style.css

 html { font-family: verdana; font-size: 10pt; line-height: 25px; } header ,footer , aside, nav , article{ display:block; } .headerspan{ height:40px; width:860px; margin: 0px auto; text-align: center; position:absolute; top:-10; font-size:200%; } table { border-collapse: collapse; width: 300px; overflow-x: scroll; display: block; } thead { background-color: #EFEFEF; margin-top:50px; } thead, tbody { display: block; } tbody { overflow-y: scroll; overflow-x: hidden; height: 140px; } td, th { min-width: 100px; height: 25px; border: dashed 1px lightblue; } #search { padding: 5px 9px; height: 12px; width: 380px; border: 1px solid #a4c3ca; font: normal 13px 'trebuchet MS', arial, helvetica; background: #f1f1f1; border-radius: 50px 3px 3px 50px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); }

Answer 1

BodyJuan Bonnet收到了这个。 加载完毕后，在主体底部添加JQUERY && scroll.js，否则Jquery在加载HTML之前找不到引用。

头部首先加载，因此在调用时不存在主体。

在加载Body之后再加载Jquery，它将更好地工作。 如果您真的不想或不能... charliefti有解决方案。 $（document）.ready（）{您的Jquery代码}如果您的主体在调用$（'＃myElement'）时不存在，则Jquery无法找到它，即使您可以在源代码中看到它。 操作顺序。

如果可以的话，最好始终将Jquery和任何脚本加载到正文的底部。 这意味着HTML将在.js之前加载，从而提供更好的用户体验。

将jQuery添加到Header.php文件失败

问题描述

1 个解决方案

解决方案1
0 2016-03-21 19:30:29

将jQuery添加到Header.php文件失败

问题描述

1 个解决方案

解决方案1 0 2016-03-21 19:30:29

解决方案1
0 2016-03-21 19:30:29